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


Posted in Javascript onFebruary 27, 2017

问题描述:

利用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实现删除数据后重新加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery实现文档树效果
Feb 20 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 #Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 #Javascript
详解Javascript几种跨域方式总结
Feb 27 #Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 #Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 #Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 #Javascript
JavaScript中Promise的使用详解
Feb 26 #Javascript
You might like
一些PHP写的小东西
2006/12/06 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP中的表达式简述
2016/05/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python实现猜单词小游戏
2020/05/22 Python
Python地图绘制实操详解
2019/03/04 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
南京青奥会口号
2014/06/12 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
暂住证证明
2015/06/19 职场文书
2015中学教学工作总结
2015/07/22 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
SQL Server 中的事务介绍
2022/05/20 SQL Server