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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
axios学习教程全攻略
Mar 26 Javascript
微信分享调用jssdk实例
Jun 08 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
YII2 实现多语言配置的方法分享
2017/01/11 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python编写万花尺图案实例
2021/01/03 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
一套Java笔试题
2016/08/20 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
学生周末长期请假条
2014/02/15 职场文书
网站出售协议书范文
2014/10/10 职场文书
劳资员岗位职责
2015/02/13 职场文书
开会通知
2015/04/20 职场文书
三国演义读书笔记
2015/06/25 职场文书
JS的深浅复制详细
2021/10/16 Javascript
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
Python 全局空间和局部空间
2022/04/06 Python