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 相关文章推荐
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Vue常用指令详解分析
Aug 19 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Openlayers绘制地图标注
Sep 28 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
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript 闭包详解
2015/02/15 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Vue中如何实现proxy代理
2018/04/20 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python pygame实现2048游戏
2018/11/20 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
求职自荐信范文格式
2013/11/29 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
双创工作实施方案
2014/03/26 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
团代会闭幕词
2015/01/28 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫