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.Treeview添加右键菜单的实现代码
Oct 22 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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
截获网站title标签之家内容的例子
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
js 单引号 传递方法
2009/06/22 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
深入理解Django-Signals信号量
2019/02/19 Python
django富文本编辑器的实现示例
2019/04/10 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
QML用PathView实现轮播图
2020/06/03 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
情人节寄语大全
2014/04/11 职场文书
区级文明单位申报材料
2014/05/15 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
工作所在部门证明
2014/09/21 职场文书
文明礼仪倡议书
2015/04/28 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript