DataTables Infinite Scroll Not Working
DataTables Infinite Scroll Not Working
DataTable Loads the first time fine with 10 records set as display buffer,but as soon as i scroll down the table further ajax call
based on shifting view port in DataTable is not fired.I have checked in the browser console there seems to be no error,and when i
check the server side the ajax data call happens only the first time the table loads.After 10 records,its just blank, till the end of
the table. I am a newbie to the DataTable section so any help in this regard would be much appreciated .I have been in the dark
for two days Can anyone shine a light on my Problem Thanks..
Here is the DataTables Debugger Link: http://debug.datatables.net/inonuv
Here is my code
function Load () {
var oTable = $('table#productList').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
"ordering": true,
"scrollY": 200,
"scrollCollapse": true,
"scroller":{
loadingIndicator: true, displayBuffer: 10
},
"dom": "tiS", // UI layout
"ajax": {
"url": '/Product/GetProductListOfMerchant',
"dataType": 'json',
"type": "POST",
"data": function (d) {
d.ProductNameSearch= $("#ProductNameSearch").val(),
d.ProductSkuSearch= $("#ProductSkuSearch").val(),
d.ProductTagSearch= $("#ProductTagSearch").val(),
d.ParentCategorySearch= $("#ParentCategorySearch").val(),
d.SubCategorySearch= $("#SubCategorySearch").val() ,
d.FeaturedProducts = $("#FeaturedProductSearch").val()
}
},
"columns": [
{
"class": "rank",
"data": null, // #
"orderable": false,
"defaultContent": "",
},
{
"class": "ProductName",
"data": 'ProductName',
"orderable": true,
"defaultContent": "",
},
{
"class": "SKU",
"data": 'SKU',
"orderable": true,
"defaultContent": "",
},
{
"class": "StockQuantity",
// "data": 'StockQuantity',
"orderable": true,
"defaultContent": "",
"render": function (data, type, row, meta) {
return row.StockQuantity.toFixed(2);;
}
},
{
"class": "ProductPrice",
//"data": 'ProductPrice',
"orderable": true,
"defaultContent": "",
"render": function (data, type, row, meta)
{
return row.ProductPrice.toFixed(2);;
}
},
{
"class": "IsPublished",
//"data": 'IsPublished',
"orderable": true,
"defaultContent": "",
"render": function (data, type, row, meta) {
if (row.IsPublished == true) {
return '<input type="checkbox" checked="checked" disabled> ';
}
else
{
return '<input type="checkbox" disabled > ';
}
}
},
{
"class": "ThumbNailUrl",
"orderable": false,
"defaultContent": "",
"render": function (data, type, row, meta) {
var imgSrc = row.ThumbNailUrl !== null ? row.ThumbNailUrl : "";
if (imgSrc == "")
{
imgSrc = "/Content/template/images/no_product_image_large.png"
}
return '<img class="img-rounded" src="' + imgSrc + '" alt=""> ';
}
},
{
"class": "WomShared",
"data": 'WomShared',
"orderable": false,
"defaultContent": "",
}
, {
"data": null, // #
"orderable": false,
"defaultContent": "",
"render": function (data, type, row, meta) {
var html = '';
if (!row.IsDeleted) {
html += ('<a href="EditProduct?productId=' + row.ProductId + '" ><i class="fa fa-pencil"></i></a> |' + '<a href="javascript:void(0);" onclick="actionPrompt(' + row.ProductId + ',0)"><i class="fa fa-trash-o" style="color:#FC4450;"></a>');
}
else {
html += ('<a href="EditProduct?productId=' + row.ProductId + '" ><i class="fa fa-pencil"></i></a> |' + '<a href="javascript:void(0);" onclick="actionPrompt(' + row.ProductId + ',1)"><i class="fa fa-recycle" style="color:#FC4450;"></a>');
}
return html;
},
},
],
// Index column
oTable.on('draw', function () {
var start = oTable.page.info().start;
oTable.column(0).nodes().each(function (cell, i) {
cell.innerHTML = start + i + 1;
});
});
}
Replies
Thanks for your question. However, please don't post duplicates. I've deleted the three other duplicates.
Can you link to the page please. For this kind of issue I'd need to see the rendered page. The debugging unfortunately doesn't capture the information required.
Allan