仅在数据更改时刷新 DataTable

Posted 2023-05-09

【中文标题】仅在数据更改时刷新 DataTable

【英文标题】：Refresh DataTable only if data changed

【发布时间】：2018-07-20 08:00:57

【问题描述】：

我将 DataTables 与 serverside = true 一起使用。仅当服务器上的数据发生更改时，我才想重绘我的数据表。但是 table.ajax.reload() 在每次调用时都会重绘表格。

你能提供一个小例子吗？

从服务器获取数据 检查数据是否已更改 用新数据重绘表格

基于 cmets 的 UPD：

我有简单的服务器端处理数据表。如果用户更改页面或排序或过滤或其他任何东西，则有 ajax 查询到服务器以接收新数据并重绘表。但是服务器上的数据可能会改变。例如，其他用户向数据库表中插入新行或更改某些内容。我想如果这发生在数据表中的数据会自动刷新。但这是罕见的事件。无需每 10 秒（或几秒）重绘所有数据。仅当服务器上的某些内容发生更改时才需要重绘。对服务器的查询很快。重绘很慢。

【问题讨论】：

也许我错过了收益。重绘表格是否有性能或其他问题？绘制表格不应该是服务器端处理的负担。

您是在尝试优化表格的呈现，还是优化网络带宽？无论哪种方式，我都不相信 DataTables 中存在此功能。

我正在尝试优化渲染。桌子很大，里面有图片。在旧电脑上渲染很慢。检查 json 字符串是否相等很快。

您的数据库中有更新时间戳吗？您需要做的第一件事是知道正在显示哪些行。一种选择是使用rows().ids()。您可以使用'page:'current''的selector-modifer，例如：$('#myTable).DataTable().rows(page: 'current').ids()。然后使用 ajax 查询那些IDs 的数据库。然后使用rows().data()获取比较。请提供有关您的数据的更多详细信息，我们可以提供更详细的答案。

我有简单的服务器端处理数据表。如果用户更改页面或排序或过滤任何其他内容，则 ajax 查询到服务器以接收新数据并重绘表。但是服务器上的数据可能会改变。例如，其他用户向数据库表中插入新行或更改某些内容。我想如果这发生在数据表中的数据会自动刷新。但这是罕见的事件。无需每 10 秒（或几秒）重绘所有数据。仅当服务器上的某些内容发生更改时才需要重绘。对服务器的查询很快。重绘很慢。

【参考方案1】：

这是一个很好的问题 - 我的 DataTables 中有按钮、输入等。当重绘发生时，可能会发生文本框失焦或误点击按钮等问题。为了避免这种情况，我将我的 DataTables 设置为仅在有来自服务器的新/更新数据时才重绘。

方法如下：

template.html

<!-- include lodash _ used to determine json equality -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

script.js

// global variables that are updated with each new ajax reload call:
var last_response = ;
var redraw = false;

// DataTable init:
var table = $('<selector>').DataTable(
  
  // initial settings:
  "columns" : ["<the columns>"],
  ...      

  // override the dataSrc parameter to handle data upon receiving a new response:
  "ajax" : 
     "url" : "<the url>",
     "dataSrc": function(response) 
 
       // compare response to the last response using lodash:
       if (_.isEqual(last_response, response) redraw = false;
       else redraw = true;

       // set the last_response global variable:
       last_response = response; 

       // return appropriately formatted data:
       return data;
     
  
  // use the predraw callback to determine whether to draw or not:
  "preDrawCallback" : function() 

    // return true to draw or false to skip draw:
    return redraw;

  
   
);