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 相关文章推荐
Js动态创建div
Sep 25 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue实现移动端div拖动效果
Mar 03 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
Session保存到数据库的php类分享
2011/10/24 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
新手常见6种的python报错及解决方法
2018/03/09 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
会计人员岗位职责
2014/03/19 职场文书
应届毕业生求职信
2014/05/26 职场文书
经济管理自荐书
2014/06/09 职场文书
授权委托书(完整版)
2014/09/10 职场文书
优秀教师申报材料
2014/12/16 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
文明倡议书
2015/01/19 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python