JqueryUI Datatables устанавливает рекордыВсего

Question

Можно ли вручную установить атрибут recordsTotal при использовании обработки на стороне клиента?

То, что я построил, похоже на отложенную загрузку, когда таблица загружается с начальным порцией данных (на данный момент стоит 5 страниц). Затем, как только она загружается, она выполняет кучу фоновых вызовов ajax для загрузки. остальные данные. Это позволяет очень быстро загружать и реагировать на таблицы, а также обеспечивает скорость сортировки и фильтрации на стороне клиента. Что происходит, хотя, счетчик записей покажет «50» для начала, затем, когда вызовы ajax завершатся, он перейдет к 300, 600 и т. Д., И аналогично селектор страниц покажет 5, затем 30 и т. Д.

Я возвращаю recordsTotal с ответом ajax, как при обработке на стороне сервера, и использую его для определения количества чанков / фоновых запросов ajax. Однако я не могу найти параметр или функцию для установки в таблице, чтобы переопределить общее количество записей. Я бы хотел избежать перерисовки html, так как он выглядит немного нестабильным и предпочел бы, чтобы фоновая загрузка была более невидимой для конечного пользователя.

Возможно ли это? Спасибо!

Answer 1

Я бы использовал встроенную обработку на стороне сервера, если это возможно. Но если вы действительно хотите изменить значение общего количества записей, вы можете перезаписать fnRecordsTotal -метод.

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