使用Datatable插件时遇到的奇葩问题（二）

最新推荐文章于 2023-02-16 14:25:25 发布

红石丶

最新推荐文章于 2023-02-16 14:25:25 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：日常学习日记文章标签： datatables datatable retrieve datatable重置 datatable刷新

本文链接：https://blog.youkuaiyun.com/zhaoyanga14/article/details/87793880

日常学习日记专栏收录该内容

24 篇文章

订阅专栏

本文探讨了在使用Datatable时遇到的无法刷新数据问题，深入解析了retrieve属性的作用，并提供了两种解决方案：一是通过fnClearTable和fnDestroy方法清空并销毁原Datatable，二是利用fnDraw方法重新绘制表格。

1.今天的问题是：我重新初始化Datatable，为什么展示的还是之前加载的数据？怎么展示我获取到的新数据？

这个问题，其实是因为使用了 retrieve : true 属性。它的作用如下图描述所示。

而有时我们又不得不使用它。我这里的情况是，如果讲它置为 false ，会报无法找到 id 等等错误。

所以抛开这个问题，如何去解决？

第一种方法：那就是通过 Datatable 的 fnClearTable();//清空数据和 fnDestroy();//销毁Datatable 方法。

    //初始化表格
    function initTable(tColumns, tDatas){
		if ($('#datatable').hasClass('dataTable')) {
			var oTable = $("#datatable").dataTable();
			oTable.fnClearTable();  //清空数据
			oTable.fnDestroy();  //销毁datatable
        } 
        table = $("#datatable").DataTable({
            "language" : {
                "url" : _ctx + "/statics/components/datatables/i18n/zh_ZH.txt"
            },
			"ordering": false,//排序 关闭
			"autoWidth": false,//关闭自动设置宽度
			"scrollX": true,//开启水平滚动条
            "info": false, // 默认为true，当前页面显示信息。
            "responsive": false,// 默认为false，自适应，关闭之后就可以完美触发横轴滚动条，不会错版。
            "processing " : true,   //开启读取服务器数据时显示正在加载    MDX
            "searching" : true,
            "retrieve": true,
            "pageLength" : 4, 
            "lengthChange": false,// 默认为true，显示页面记录条数变更下拉框。
            "columns" : tColumns,
            "serverSide" : false,  //开启服务器模式，使用服务器端处理配置datatable MDX
            "data" : tDatas
        });
    }

这样就可以解决不加载新数据的问题。

第二种方法：就是使用 fnDraw() 方法，重新绘制表格。