JqueryUI Datatables set recordsTotal

Question

Is it possible to manually set the recordsTotal attribute when using client side processing?

What I have built, is somewhat akin to deferred loading, where the table gets loaded with an initial chunk of data (5 pages worth at the moment.) Then once it loads, it does a bunch of background ajax calls to load the remaining data. This allows the table to be loaded and responsive very rapidly, while also allowing the speed of client-side sorting and filtering. What is happening though, is the records count will show "50" to start, then as the ajax calls finish it will jump to 300, 600, etc. and similarly the page selector shows 5, then 30, etc.

I return the recordsTotal with the ajax response, the way you would with server side processing, and use this to determine how many chunks/background ajax requests to make. However I cannot find a setting or function to set on the table to override the total record count. I would like to avoid the html having to be redrawn, as it feels a bit choppy, and would prefer the background loading to be more invisible to the end user.

Is this possible? Thanks!

Answer 1

I would use the build in server-side-processing if possible. But if you really want to change the value for total records, you could overwrite the fnRecordsTotal-method.

$(document).ready(function() {
  
  $.fn.dataTable.models.oSettings.fnRecordsTotal = function () { return 42; };
  
  let datatable = $('#table_id').DataTable();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1: Test1</td>
      <td>Row 1 Data 2: Test2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1 (Lorem)</td>
      <td>Row 2 Data 2 (Ipsum)</td>
    </tr>
  </tbody>
</table>