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

Question

I was tried to use these approaches:

1. Using api().draw(false) function, but it resets scroll offset.
2. Using api().ajax.reload(null, false). It resets scroll offset too.
3. Using dataTable._fnDraw() function. It doesn't work too. There is a bug when you are trying a bit scroll and after _fnDraw() call it scrolls to previous position. When you are scrolling a lot - it works well.

My TypeScript code:

 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

I didn't find any other way as get scrollTop of scroller before ajax call and after table refresh ( api().ajax.reload ) assign it again. It's works for me.

Answer 2

Datatable automatically refresh (with updated data) on server side operation, no need to force refresh.

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

A live example can be found here