Html重新加载table数据,jQuery使用DataTable实现删除数据后重新加载功能

淩亂°似流年 2022-10-06 06:58 247阅读 0赞

jQuery使用DataTable实现删除数据后重新加载功能

发布时间：2020-08-31 08:19:47

来源：脚本之家

阅读：233

作者：Rexcnblog

问题描述：

利用jQuery Datatable和artTemplate组合来做的表格。但是当删除数据时，需要重新加载table里的数据。但是问题是datatable并没有直接的重新渲染，反而给数据累加上了。

解决办法：

经过查看高人的blog，发现可以先销毁table，然后再重新渲染。

var dttable;

App.globalAjax("get", "/Order/MyJsonList", \{\}, function (result) \{

var html = template('Orders-template', result);

$("\#datatable1").find("tbody").html(html);

dt = $('\#datatable1').dataTable(\{

"sPaginationType": "bs\_full"

\});

\});

这个是第一次通过ajax获取到数据，然后利用artTemplate来渲染数据，最后填充到页面中，然后进行渲染。

接下来就是执行删除操作，然后重新加载渲染table

App.globalAjax("post", "/Order/DeleteOrder", data, function (result) \{

App.globalAjax("get", "/Order/MyJsonList", \{\}, function (result) \{

var html = template('Orders-template', result);

if ($('\#datatable1').hasClass('dataTable')) \{

dttable = $('\#datatable1').dataTable();

dttable.fnClearTable(); //清空一下table

dttable.fnDestroy(); //还原初始化了的datatable

\}

$("\#datatable1").find("tbody").html(html);

$('\#datatable1').dataTable();

\});

\});

到此，datatable就可以重新渲染了。

以上所述是小编给大家介绍的jQuery使用DataTable实现删除数据后重新加载功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持！

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 Html重新加载table数据,jQuery使用DataTable实现删除数据后重新加载功能

jQuery使用DataTable实现删除数据后重新加载功能发布时间：2020-08-31 08:19:47 来源：脚本之家阅读：233 作者：Rexcnblog

淩亂°似流年/ 2022年10月06日 06:58/ 0 赞/ 248 阅读

相关 jqgrid treegrid 重新加载数据

jqgrid treegrid 重新加载数据，难道是搜索关键字有问题？国内的网站没有找到答案，官网API 也是一顿好找也没找到。最后去stackoverflow 去找到答案

谁借莪１个温暖的怀抱￠/ 2022年06月12日 00:59/ 0 赞/ 282 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

你的名字/ 2022年04月25日 02:36/ 0 赞/ 953 阅读

相关 echarts 重新渲染(重新绘制,重新加载数据)

mychart.setOption(option,true) 如果如上方案不生效，请查看下面文章 https://www.ji

朱雀/ 2022年04月15日 02:43/ 0 赞/ 1525 阅读

相关重新加载script

在web开发中，我们会莫名其妙的出现错误，明明已经引入js脚本，却运行时依然找不到js，此时可以考虑是否成功加载js，因此需要自己手动加载脚本，下边是jquery提供的方法：

骑猪看日落/ 2022年04月11日 13:39/ 0 赞/ 323 阅读

相关 owl-carousel 重新加载

1.初始化 <div class="carousel slide" data-ride="carousel"> <div class="slide

忘是亡心i/ 2022年03月29日 09:56/ 0 赞/ 290 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

朴灿烈づ我的快乐病毒、/ 2022年01月09日 07:03/ 0 赞/ 432 阅读

相关 JS实现刷新_重新加载页面

问题解决：在JS代码中加入下面语句 location.reload(); //实现页面重新加载

╰半夏微凉°/ 2021年11月11日 06:04/ 0 赞/ 358 阅读

相关如何使 Bootstrap Table 初始化、重新加载

BootstrapTable重新加载遇到此问题的情景解决办法原始加载的表格解决后加载表格 >

本是古典何须时尚/ 2021年09月23日 09:02/ 0 赞/ 1224 阅读

相关 iframe 重新加载

方法1： document.getElementById('iframeId').contentWindow.location.reload(true); 方

Dear 丶/ 2021年09月18日 09:40/ 0 赞/ 501 阅读