DataTables Infinite Scroll Not Working

VargheseCherian

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;
                });
            });
}

allan

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