Datatables serverside / scroller issue
Datatables serverside / scroller issue
jadsy2107
Posts: 4Questions: 2Answers: 0
Hi all,
I'm having issue with scroller with server-side ajax.
When you scroll to a certain length, (anything beyond 500) and refresh the page, all you see is white, and Showing x of x - changes and is incorrect.
Visit https://ngn.au/shop/all
$(document).ready(function(){
var table = $('#stockTable').DataTable({
scrollResize: true,
scrollY: 500,
lengthChange: true,
scroller: true,
responsive: true,
details: {
type: 'column'
},
deferRender: true,
processing: true,
serverSide: true,
serverMethod: 'post',
stateSave: true,
ajax: {
'url':"https://ngn.au/getStock/all///",
'data': function(data){
// CSRF Hash
var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
var csrfHash = $('.txt_csrfname').val(); // CSRF hash
return {
data: data,
[csrfName]: csrfHash // CSRF Token
};
},
dataSrc: function(data){
// Update token hash
$('.txt_csrfname').val(data.token);
// Datatable data
return data.aaData;
}
},
"columnDefs": [{
"targets": 3,
"render": function ( data, type, row, meta ) {
var itemID = row['id'];
return '<a href="/product/'+ itemID + '">' + data + '</a>';
},
}, {
"targets": 2,
"render": function ( data, type, row, meta ) {
var Vendor = row['Vendor'];
return '<a href="/shop/'+ Vendor + '">' + data + '</a>';
},
},
// give details button seperate tab,
{
target: 0,
"render": function ( data, type, row, meta ) {
return '';
},
orderable: false,
searchable: false,
},
{
className: 'dtr-control',
orderable: false,
targets: 0
},
{
responsivePriority: -1,
targets: 3
}
],
'columns': [
{ data: 'id' },
{ data: 'StockCode' },
{ data: 'Vendor' },
{ data: 'StockDescription' },
{ data: 'RRPEx' },
{ data: 'StockAvailable' },
]
});
});
Steps to Reproduce:
Scroll down to past 500 , refresh page