Scroller not loading more data on scroll
Scroller not loading more data on scroll
![scilence](https://secure.gravatar.com/avatar/8f883432fe81ff7e8e6ad0c9eb41ba1f/?default=https%3A%2F%2Fvanillicon.com%2F8f883432fe81ff7e8e6ad0c9eb41ba1f_200.png&rating=g&size=120)
Hi, I'm having an issue with scroller failing to load more data when the end of the content is reached.
Initialization
$(document).ready(function() {
$('#datatable').DataTable( {
serverSide: true,
ordering: false,
searching: false,
paging: false,
"ajax": {
"url": "items_ordered.json",
},
"language": {
"emptyTable": "No items ordered with the filter criteria"
},
scrollY: 200,
scroller: {
loadingIndicator: true
},
createdRow: function(row, data, dataIndex){
if(data.major.includes("TOTAL")){
$(row).addClass('font-weight-bold');
$('td:eq(0)', row).attr('colspan', 3);
$('td:eq(1)', row).css('display', 'none');
$('td:eq(2)', row).css('display', 'none');
}
},
"columnDefs": [
{ className: "text-right kill-padding", "targets": [ 3, 4, 5 ] },
],
"columns": [
{
"data": "major",
"defaultContent": "",
},
<% case @sort
when 'Customer' %>
{
"data": "order",
"defaultContent": "",
},
{
"data": "item",
"defaultContent": "",
},
<% when 'Order' %>
{
"data": "customer",
"defaultContent": "",
},
{
"data": "item",
"defaultContent": "",
},
<% when 'Item' %>
{
"data": "order",
"defaultContent": "",
},
{
"data": "customer",
"defaultContent": "",
},
<% end %>
{
"data": "ordered",
"defaultContent": "",
"className": "text-right",
},
{
"data": "price",
"defaultContent": "",
"className": "text-right",
},
{
"data": "shipped",
"defaultContent": "",
"className": "text-right",
},
{
"data": "date",
"defaultContent": "",
},
{
"data": "status",
"defaultContent": "",
},
{
"data": "cost",
"defaultContent": "",
"className": "text-right",
},
{
"data": "margin",
"defaultContent": "",
"className": "text-right",
},
]
} );
} );
Sample of data returned from items_ordered.json
{
"draw":"1",
"recordsTotal":10,
"recordsFiltered":1975,
"data":[{
"major":"7th Avenue Wine \u0026 Liquor",
"order":"\u003ca href=\"/sales_orders/6681\"\u003e11817\u003c/a\u003e",
"item":"FVR0ROSE19B - VRAC, Rose (2019) 3L BIB x 6 6x1lb",
"order_number":11817,
"ordered":"5 CA",
"price":"$100.13 CA",
"shipped":"5 CA",
"date":"2020-03-05",
"status":"Invoiced",
"cost":"$51.25",
"margin":"48.82%"
}]
}
Initially, I get a table with 10 rows of data as expected. When scrolling further, I get nothing. If I enable paging, it does load the next sets of data as expected when clicking between them, but this is really data that needs to be displayed altogether.
Thanks for any help with this.
Edit: I apologize, I cannot for the life of me get the code to format correctly here.
Replies
Sorry, I figured this out by reinstalling datatables + scroller. Apparently scroller wasn't installed correctly.