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

How to refresh DataTable with server side processing and Scroller extension

本文关键字：扩展 刷新 DataTable 滚动 何使用 服务器端 处理      更新时间：2023-09-26

我尝试使用这些方法:

  1. 使用api().draw(false)函数，但它会重置滚动偏移量。
  2. 使用api () . ajax。重载(null,假)。它也会重置滚动偏移量。
  3. 使用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);
  }
}

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

数据表自动刷新(更新后的数据)在服务器端操作，无需强制刷新

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

相关文章：