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加强之自定义event事件
Sep 21 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
Feb 19 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
javascript实现倒计时提示框
Mar 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
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php中socket通信机制实例详解
2015/01/03 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
给Function做的OOP扩展
2009/05/07 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue-router项目实战总结篇
2018/02/11 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python提取内容关键词的方法
2015/03/16 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
个人社会实践自我鉴定
2014/03/24 职场文书
初中学生评语大全
2014/04/24 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
华山导游词
2015/02/03 职场文书
如何写通讯稿
2015/07/22 职场文书
教师岗位说明书
2015/09/30 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js