当前位置: 首页 > 编程笔记 >

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

寇甫
2023-03-14
本文向大家介绍jQuery使用DataTable实现删除数据后重新加载功能,包括了jQuery使用DataTable实现删除数据后重新加载功能的使用技巧和注意事项,需要的朋友参考一下

问题描述:

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

 类似资料:
  • null t错误显示为: null DataTables警告:表ID=Slave-Requested未知参数'0'用于行0,列0。有关此错误的详细信息,请参阅http://datatables.net/TN/4 null 我通过进行API调用得到的数据如下: 请帮帮我。如果你想要更多的信息就问。

  • 问题内容: 我正在尝试实现一些功能,即单击屏幕上的按钮将导致我的[QuerydataTable刷新(因为自创建dataTable以来服务器端数据源可能已更改)。 这是我所拥有的: 但是当我运行它时,它什么也没做。单击按钮时刷新dataTable的正确方法是什么?提前致谢! 问题答案: 您可以尝试以下方法:

  • 本文向大家介绍Vuex实现数据增加和删除功能,包括了Vuex实现数据增加和删除功能的使用技巧和注意事项,需要的朋友参考一下 首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 2.组件调用state数据进行展示 我们的目的是把state数据赋值给vue组件进行使用,其实,这里有两种常用方法 方式二是我们经常用到的简写方式 基本的数据获取,就是这样的实现,此时我们看

  • 本文向大家介绍jQuery实现列表的增加和删除功能,包括了jQuery实现列表的增加和删除功能的使用技巧和注意事项,需要的朋友参考一下 具体代码如下所示: 总结 以上所述是小编给大家介绍的jQuery实现列表的增加和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍ajax实现加载数据功能,包括了ajax实现加载数据功能的使用技巧和注意事项,需要的朋友参考一下 加载数据的具体代码,供大家参考,具体内容如下 1.xssj.php 2.xschuli.php 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍PHP+jQuery实现滚屏无刷新动态加载数据功能详解,包括了PHP+jQuery实现滚屏无刷新动态加载数据功能详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能。分享给大家供大家参考,具体如下: index.php ajax_demo.sql result.php  接收请求页面 connect.php  数据库配置文件