У меня есть таблица dataTables и я добавляю в нее большой кусок строк.
Я хотел бы иметь возможность работать с таблицей во время добавления данных.
Проблема в том, что код DataTables перестраивает блок Pagination при каждом выполнении .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>