Scroller extension not displaying records or updating record counts on scroll in IE8

beacon5

Hi,

I've set up client-side processing for a DataTable using the Scroller extension (DataTables 1.10.9, Scroller 1.3.0). I'm using an Ajax post to obtain the data, then passing the data to the table during intialization using the below code:

$.ajax({
    type: "POST",
    url: "api/getdata",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        CreateTable(data);
    }
});

function CreateTable(data) {
    $("#scrollTable").dataTable({
        data: data,
        columns: columnArray,
        dom: "ftirS",
        language: {
            emptyTable: "No results",
            processing: "<div id='processing-with-gif'>Processing<br/>" + "<img src='Images/ajax-loader.gif'></div>"
        },
        order: [1, "asc"],
        paging: true,
        processing: true,
        scrollY: 300,
        scrollCollapse: true,
        scroller: true,
        searching: true
    });
}

The above code works perfectly in Google Chrome. The data scrolls in the table and the record indicators update as you scroll. However, this is not the case in IE8. Not all records are displayed as you scroll. For me, maybe 20 records are displayed prior to the remaining table cells just disappearing. You can continue to scroll, but no records display. Also, the records indicator just sits at "Showing 1 to 10 of XXXX entries".

I would have supplied my own working example of this, but there already is one on the DataTables site in the Scroller examples section (Client-side data source (50,000 rows)). The example is behaving exactly how my site is behaving. When you scroll to about the 50th record, no more records appear, even though the record indicator shows there should be 50,000 records. The record indicator also doesn't update as you scroll, showing the static "Showing 1 to 6 of 50,000 entries".

I searched the forums and online, but only found one issue that seems to be related to the one described above (LINK). However, that discussion was closed due to the originator of the post not providing sufficient details. Hopefully, my post better explains the issue.

I have designs to use the Scroller extension with a server-side processing table at some point in the future, but the example on the DataTables site for server-side processing (Server-side processing (5,000,000 rows)) also isn't working properly. Unfortunately, I have to continue to support IE8 for the foreseeable future and the requirements I'm working with call for a scrolling table. Any help is very much appreciated.

Thanks.

referee

Hi, i met with same issue. In ie8 scrolling doesn't call ajax handler function.
Any workaround?
Thx

referee

My workaround for this issue is wrappping the code in dataTables.scroller.js

      $(this.dom.scroller).on( 'scroll.DTS', function (e) {
        that._fnScroll.call( that );
      } );

with timeout

    setTimeout(function () {
      $(this.dom.scroller).on( 'scroll.DTS', function (e) {
        that._fnScroll.call( that );
      } );
    }.bind(this), 750);