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重写windows.alert方法实现思路
Apr 03 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
使用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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python列表与元组的异同详解
2019/07/02 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
铁路工务反思材料
2014/02/07 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
安全月宣传标语
2014/10/07 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS