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中的作用域和上下文使用简要概述
Dec 05 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
javascript实现控制div颜色
Jul 07 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Node.js API详解之 module模块用法实例分析
May 13 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python同步两个文件夹下的内容
2019/08/29 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
安全责任书范本
2014/04/15 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
受伤赔偿协议书
2014/09/24 职场文书
鲁迅故居导游词
2015/02/05 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
PL350与SW11的比较
2021/04/22 无线电
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android