Problem with initial display when using Scroller with serverSide & scrollCollapse

kevinc

I'm seeing a problem with the initial display when using Scroller with serverSide and scrollCollapse both set to true. I was wondering if anyone else has experienced this and/or has a workaround.

When the table is first displayed only the first 9 rows are shown (with the remainder of the space displaying the "loading" background). This persists until one scrolls fairly far down (approximately row 54) at which point the everything sorts itself out and all the rows become visible.

It appears that the fnMeasure function in Scroller is being called twice during the initial display process. The first time it returns 9, (because heights.viewport is zero) which probably explains why 9 rows are displayed. The second time it's called it returns a more expected value (something greater than 50).

My configuration is: DataTables 1.10.9, Scroller 1.3.0, Bootstrap 3.3.5, jQuery 1.11.0.

Here's the initialization code for the DataTable:

    $('#shipment').dataTable({
        lengthChange:false,
        paging:true,
        serverSide:true,
        scrollCollapse:true,
        scroller:true,
        scrollY:400,
    ajax: function (data, callback, settings) {
      var out = [];
 
      for (var i=data.start, ien=data.start + data.length; i < ien ; i++) {
        out.push([ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5']);
      }
 
      setTimeout(function () {
        callback({draw: data.draw, data: out, recordsTotal: 5000000, recordsFiltered: 5000000});
      }, 50);
    }
    });

I used the ajax function from one of the examples to eliminate any possible interaction with whats returned by the server. I've also eliminated any initialization options that don't seem to affect the result in order to simplify the example.

Here's a link to a JSFiddle that demonstrates the issue: https://jsfiddle.net/8dsbbmL2/1/

Thanks in advance for any insights.

kevinc

In case anyone is interested, this issue still seems to exist as of DataTables 1.10.10 and Scroller 1.4.0 (i.e. the latest releases as of today).

If someone has a workaround to suggest, I'd certainly appreciate it.

MikeC

I had the same issue. I used this work around

In your CSS add a min-height equal to your scrollY value.

.dataTables_scrollBody{
        min-height: 400px;
}

This helps datatables calculate the proper initial number of rows to request from the server side script
Then remove the min-height so the scrollCollapse will work by adding this to the
initialization code for the DataTable:

 "fnInitComplete":function(){
           $('div.dataTables_scrollBody').css('min-height', 0);          
  },

mak1

MikeC, does your solution assume the data is retrieved from the server side and the datatable is visible on page load?

In our case, the datatable is hidden until the user checks a box. Then once the box is checked, the server side API call is made to retrieve the data and populate it. This is when we run in to the pagination being out of order.

I posted my question here (https://www.datatables.net/forums/discussion/34087/scroller-plugin-with-scrollcollapse-causes-pagination-issues#latest) but it seems similar to this one except our datatable gets loaded based on user action not page load.

mak1

I tried the solution on this discussion but my pagination shows as this on load

"Showing 1 to 2 of 380 entries"

even though I'm really showing about 10 records at a time, the datatable thinks I'm showing 2 at a time.

soporte

deferLoading : 10

It works for me.

rabsia

The Scroller use jQuery.height() method to caculate heights.viewport, at line #435 of dataTables.scroller.js, version 1.4.2:

heights.viewport = $(this.dom.scroller).height();

And there is no configuration to change it.

"scrollY: 370" as example, When set "scrollCollapse: true", the css of "div.dataTables_scrollBody" would be "max-height: 370px;", not "height: 370px;". That's why jQuery.height() cannot return correct height of scrollBody.

That's the problem, but i've not found any good solution......