如何使用服务器端处理和 Scroller 扩展刷新 DataTable

Question

我尝试使用这些方法：

使用 api().draw(false) 函数，但它会重置滚动偏移量。
使用 api()。ajax.reload(null, false)。它也重置滚动偏移。
使用 dataTable._fnDraw() 函数。它也不起作用。当您尝试稍微滚动时，在 _fnDraw() 调用后滚动到上一个位置时会出现错误。当您滚动很多时 - 它运行良好。

我的 TypeScript 代码：

var dataTableOptions = {
  serverSide: true,
  ordering: true,
  searching: true,
  columns: [
    { "data": "id" },
    { "data": "workflowId" },
    { "data": "discovery" },
    { "data": "title" },
    { "data": "createdBy" },
    { "data": "createDate" },
    { "data": "status" }
  ],
  ajax: (data, callback, settings) => {
    // server side service call
  },
  dom: 'rtiS',
  scrollY: 400,
  scroller: {
    rowHeight: 35,
    loadingIndicator: true
  },
  initComplete: function () {
    
    forceRefresh = _.throttle(() => {
      //this.api().ajax.reload(false);
      this._fnDraw();
    }, 1000);
  
    setInterval(() => {
      forceRefresh();
    }, 5000);
  }
}

Answer 1

数据表在服务器端自动刷新（更新数据），无需强制刷新。

$(document).ready(function() {
  var dataTableOptions = {
      serverSide: true,
      ordering: true,
      searching: true,
      columns: [
        { "data": "id" },
        { "data": "workflowId" },
        { "data": "discovery" },
        { "data": "title" },
        { "data": "createdBy" },
        { "data": "createDate" },
        { "data": "status" }
      ],
      ajax: (data, callback, settings) => {
        // server side service call
      },
      dom: "frtiS",
      scrollY: 400,
      deferRender: true,
      scroller: {
        rowHeight: 35,
        loadingIndicator: true
      }
    }

可以找到一个活生生的例子here

Answer 2

在 ajax 调用之前和在 table 刷新 (api().ajax.reload) 之后，我没有找到任何其他方法来获取滚动条的 scrollTop 再次分配它。对我有用。

如何使用服务器端处理和 Scroller 扩展刷新 DataTable

How to refresh DataTable with server side processing and Scroller extension

javascript

jquery

datatables