jQuery使用DataTable实现删除数据后重新加载功能

发布时间 - 2026-01-10 23:17:36    点击率:

问题描述:

利用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实现删除数据后重新加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# jquery  # 重新加载  # datatable  # jquery dataTable 后台加载数据并分页实例代码  # jQuery获取Table某列的值(推荐)  # bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法  # select下拉框插件jquery.editable-select详解  # jQuery实现动态添加tr到table的方法  # jquery获取table指定行和列的数据方法(当前选中行、列)  # 使用jquery给指定的table动态添加一行、删除一行  # jQuery 获取遍历获取table中每一个tr中的第一个td的方法  # jQuery EasyUI Tab 选项卡问题小结  # jquery+css实现Tab栏切换的代码实例  # 加载  # 小编  # 在此  # 上了  # 给大家  # 问题是  # 来做  # 到此  # 解决办法  # 所述  # 给我留言  # 感谢大家  # 清空  # 就可以  # 再重新  # 疑问请  # 有任何  # dttable  # blog  # brush 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: JS去除重复并统计数量的实现方法  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  C++时间戳转换成日期时间的步骤和示例代码  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  香港服务器部署网站为何提示未备案?  北京专业网站制作设计师招聘,北京白云观官方网站?  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Android使用GridView实现日历的简单功能  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  中山网站制作网页,中山新生登记系统登记流程?  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  头像制作网站在线观看,除了站酷,还有哪些比较好的设计网站?  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel模型事件有哪些_Laravel Model Event生命周期详解  如何快速搭建高效简练网站?  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  Laravel观察者模式如何使用_Laravel Model Observer配置  如何在宝塔面板中创建新站点?  Android实现代码画虚线边框背景效果  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  Laravel PHP版本要求一览_Laravel各版本环境要求对照  教学论文网站制作软件有哪些,写论文用什么软件 ?  阿里云高弹*务器配置方案|支持分布式架构与多节点部署  Laravel如何使用withoutEvents方法临时禁用模型事件  JavaScript如何实现倒计时_时间函数如何精确控制  手机网站制作与建设方案,手机网站如何建设?  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  Python函数文档自动校验_规范解析【教程】  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  如何在局域网内绑定自建网站域名?  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站?  制作公司内部网站有哪些,内网如何建网站?  零服务器AI建站解决方案:快速部署与云端平台低成本实践  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  企业网站制作这些问题要关注  动图在线制作网站有哪些,滑动动图图集怎么做?  如何解决hover在ie6中的兼容性问题  青岛网站建设如何选择本地服务器?  网站制作软件免费下载安装,有哪些免费下载的软件网站?  活动邀请函制作网站有哪些,活动邀请函文案?  IOS倒计时设置UIButton标题title的抖动问题  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  如何快速启动建站代理加盟业务?  Python正则表达式进阶教程_复杂匹配与分组替换解析