Question

我有一个dataTables表，并向其中添加了大量行。我希望能够在添加数据的同时使用表格。

问题在于，DataTables代码在每次执行.draw()时都会重建分页块，与向该函数传递什么参数无关。

当前，我通过“入侵” aoDrawCallback列表并拦截pagination回调来部分解决了这一问题。添加行时，我允许在更改页码或总页数时重绘分页块。

await sleep(..);块提供2个功能：

它允许在for循环执行期间重绘表；
它足以延迟代码，因此用户可以在重绘按钮之前单击分页按钮（即使考虑到现在我们重绘它们的频率也降低了10倍-取决于show X entries的值）

根据表的复杂程度，睡眠值（以毫秒为单位）可以降低到1。

请参见下面和JSFIddle

中的代码

我的解决方案的一个不足是我们在每个循环上浪费了睡眠时间。您能在那里提供更好的解决方案吗？

谢谢。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var oldPaginationCb;
var prevPage=-1, prevPages=-1;
var isCustomPaginationEnabled = false; //Our custom actions are disabled by default

function myPaginationCb ( settings ) {
  var
      start      = settings._iDisplayStart,
      len        = settings._iDisplayLength,
      visRecords = settings.fnRecordsDisplay(),
      all        = len === -1,
      page = all ? 0 : Math.ceil( start / len ),
      pages = all ? 1 : Math.ceil( visRecords / len );
  if (! (isCustomPaginationEnabled && page === prevPage && pages === prevPages)) {
      prevPage = page;
      prevPages = pages;
      return oldPaginationCb(settings);
  }
}

console.log('started');
var values = [...Array(500).keys()]

var commentTable = $('.commentTable').DataTable();

var dtApi = $('.commentTable').dataTable();

//Replacing the pagination draw callback function
var paginationCallback = dtApi.fnSettings().aoDrawCallback.filter(cb => { return cb.sName === "pagination" })[0];
oldPaginationCb = paginationCallback.fn;
paginationCallback.fn = myPaginationCb;


$('.addComment').on('click', async function () {
    isCustomPaginationEnabled = true;
    for(var i=0; i<values.length; i++) {
        commentTable.row.add(
            [
                'Date',
                'User',
                i,
            ]
        ).draw(false);
        await sleep(50);
    }
    isCustomPaginationEnabled = false;
});

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<div><strong>
Click Start, then try using the table navigation buttons
</strong></div>
<button class="addComment">
Start
</button>
<table class='commentTable'>
  <thead>
   <th>Date</th>
    <th>User</th>
    <th>Comment</th>
  </thead>
  <tbody>
 </tbody>
</table>

Answer 1

在for循环之外仅调用draw() API方法一次。例如：

for(var i=0; i<values.length; i++) {
   commentTable.row.add(
      [
         'Date',
         'User',
         i,
      ]
   );
}
commentTable.draw();

每official documentation：

大多数DataTables API操作不会自动执行绘制以允许对操作进行分组（例如，如果将多行分组，则效率更高）。

有关代码和演示，请参见updated example。

将数据添加到DataTables表时无法更改页面

1 个答案: