I have an application wherein I want to show table as a card list layout i.e. the each record/row would be a separate card and 3 such cards should be displayed in a row.I also want an infinite scroll with server side rendering.
scenario: total records are 105 and the length of the records is 30 but after scroll, it renders blank area and after 2nd/3rd draw the cards are displaying again.
Please find example below.
$(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()]);
});
});
Failure Scenario-above mentioned scenario
working scenario-if there is only one card in a row, scrolling is working fine
