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 this关键字使用分析
Oct 21 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php7性能提升的原因详解
2019/10/13 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python对象体系深入分析
2014/10/28 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python同时迭代多个序列的方法
2020/07/28 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
python包的导入方式总结
2021/03/02 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
大一期末自我鉴定
2013/12/13 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server