Question

我使用带有serverside = true的DataTables。我想仅在服务器上的数据发生更改时才重绘我的数据表。但每次调用时都会使用table.ajax.reload（）重绘表。

您可以提供一个小例子吗？

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

UPD基于评论：

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

Answer 1

这是一个很大的问题-我的数据表中有按钮，输入等。当发生重绘时，可能会出现诸如使文本框失去焦点或按钮单击错误之类的问题。为避免这种情况，我将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;

  }
   
});

仅在数据更改时刷新DataTable

1 个答案: