Problem with initial display when using Scroller with serverSide & scrollCollapse

Problem with initial display when using Scroller with serverSide & scrollCollapse

kevinckevinc Posts: 2Questions: 1Answers: 0

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:

    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:

Thanks in advance for any insights.


  • kevinckevinc Posts: 2Questions: 1Answers: 0

    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.

  • MikeCMikeC Posts: 1Questions: 0Answers: 0

    I had the same issue. I used this work around

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

            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:

               $('div.dataTables_scrollBody').css('min-height', 0);          
  • mak1mak1 Posts: 25Questions: 13Answers: 1

    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 ( but it seems similar to this one except our datatable gets loaded based on user action not page load.

  • mak1mak1 Posts: 25Questions: 13Answers: 1

    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.

  • soportesoporte Posts: 1Questions: 0Answers: 0

    deferLoading : 10

    It works for me.

  • rabsiarabsia Posts: 1Questions: 0Answers: 0
    edited September 2016

    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......

This discussion has been closed.