Question

我试图使用这些方法：

使用api（）。draw（false）函数，但它会重置滚动偏移。
使用api（）。ajax.reload（null，false）。它也会重置滚动偏移。
使用dataTable._fnDraw（）函数。它也不起作用。当您尝试滚动时有一个错误，在_fnDraw（）调用后它会滚动到上一个位置。当你滚动很多时 - 效果很好。

我的TypeScript代码：

＆＃13;

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);
  }
}

＆＃13;

Answer 1

在ajax调用之前和表刷新（scrollTop之后）再次分配它时，我没有找到任何其他方式作为滚动条的api().ajax.reload。这对我有用。

Answer 2

Datatable在服务器端操作时自动刷新（使用更新的数据），无需强制刷新。

$(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

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

2 个答案: