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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
关于this和self的使用说明
Aug 01 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
Express的路由详解
Dec 10 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
合同专员岗位职责
2013/12/18 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
益达广告词
2014/03/14 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
2015年重阳节主持词
2015/07/04 职场文书
500字作文之周记
2019/12/13 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技