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 相关文章推荐
让元素在网页中可拖动示例代码
Aug 13 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
JS实现放大镜效果
Sep 21 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP多例模式介绍
2013/06/24 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
php实现简易计算器
2020/08/28 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python如何存储数据到json文件
2020/03/09 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
中软Java笔试题
2012/11/11 面试题
数控技校生自我鉴定
2014/03/02 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
幼儿园感谢信
2015/01/21 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技