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 相关文章推荐
jquery each()源代码
Feb 14 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
js微信分享实现代码
Oct 11 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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 代码优化之经典示例
2011/03/24 PHP
PHP小技巧之函数重载
2014/06/02 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
django基础之数据库操作方法(详解)
2017/05/24 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
mysql 排序失效
2022/05/20 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL