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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
使用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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php下实现农历日历的代码
2007/03/07 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
php读取本地json文件的实例
2018/03/07 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python的词法分析与语法分析
2013/05/18 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
python tkinter界面居中显示的方法
2018/10/11 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
类和结构的区别
2012/08/15 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python操作CSV格式文件的方法大全
2021/07/15 Python