时间戳

首页 > 解决方案 > 向 DataTables 表添加数据时无法更改页面

javascript - 向 DataTables 表添加数据时无法更改页面

问题描述

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

问题是 DataTables 代码在每次.draw()执行时重建分页块，与传递给函数的参数无关。

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

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

根据表的复杂性，睡眠值（以毫秒为单位）可以减少到 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>

标签： javascriptdatatables

解决方案

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

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

根据官方文档：

大多数 DataTables API 操作不会自动执行绘制以允许对操作进行分组（例如，如果对它们进行分组，添加多行会更有效）。

有关代码和演示，请参阅更新的示例。

推荐阅读