У меня есть приложение, в котором я хочу показать таблицу как макет списка карт, т.е. каждая запись / строка будет отдельной картой, и 3 такие карты должны отображаться в строке. Я также хочу бесконечную прокрутку с рендерингом на стороне сервера , Сценарий
: всего записей 105, а длина записей 30, но после прокрутки отображается пустая область, а после 2-го / 3-го тиража карты снова отображаются.
Ниже приведен пример .
$(document).ready(function () {
$(document).on('preInit.dt', function (e, settings) {
let api = new $.fn.dataTable.Api(settings);
api.page.len(30);
});
var dtable = $('#paginatedTable').dataTable({
"processing": true,
"serverSide": true,
"searching": true,
"deferRender": false,
"order": [[0, "asc"]],
"ajax": {
"url": "/users/paginated/mysql"
},
"scrollY": '300px',
"scroller": {
" loadingIndicator": true,
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "salary" }
],
"createdRow": function (row, data, index) {
if (data.id) {
$('td', row).eq(0).addClass('text-left position-absolute l-0');
$('td', row).eq(1).addClass('text-right position-absolute r-0');
$('td', row).eq(1).addClass('alert-danger');
}
},
});
$('#search').on('keyup', function () {
dtable.fnFilter(this.value);
});
$("#sortingId").change(function () {
dtable.fnSort([0, $("#sortingId").val()]);
});
$("#sortingName").change(function () {
dtable.fnSort([1, $("#sortingName").val()]);
});
});
Снимок экрана: Сценарий сбоя, упомянутый выше сценарий рабочий сценарий - если в строке только одна карта, прокрутка работает нормально