Issue with Google Chrome and scroller only showing subset of returned records.

wjhumphreys

DataTables 1.10.3-dev
Scroller 1.2.2-dev

Chrome 36.0.1985.143

Server Side Paging

Table as follows

  var tableFoo = $("#table-foo").DataTable({
    "serverSide": true,                                       
    "ajax": function (data, callback, settings) {  
      $.ajax({
        url: "/AjaxHandler/GetFoo",
        type: "POST",
        dataType: "json",
        data: {
          draw:   data.draw,
          start:    data.start,
          length: data.length
        },
        beforeSend: function (xhrObj) {
          $(".DTS_Loading").show();
        }
      })
      .done(function (data, textStatus, jqXHR) {
          callback(data);
      })
      .fail(function (jqXHR, textStatus, errorThrown) {
        
      })
      .always(function (data, textStatus, jqXHR) {
        $(".DTS_Loading").hide();
      });
    },
    "autoWidth": false,      .
    "deferRender": false,    
    "scrollX": "100%",       
    "scrollY": "28.125em",   
    "scrollCollapse": true,  
    "orderClasses": false,   
    "lengthChange": false,   
    "searching": false,     
    "ordering": false,      
    "info": true,            
    "dom": "rtiS",           
    "scroller": {            .
      "loadingIndicator": true,
      "displayBuffer": 12       
    },
    "language": {
      "emptyTable": "There are no Foo to display" // Table has no records string.
    },
    "columns": [
      {
        "data": null,
        "render": function (data, type, row, meta) {
          return "<a id='" + data[0] + "' class='edit-link' href='#'>Edit</a>  ";
        }
      },
      null,
      null,
      null,
      null,
      null,
      null,
      null
    ]
  });

everything works fine in IE 7+ and Firefox.

Google Chrome when you scroll down doesn't show the bottom half of the records in the viewport.

I'm not sure if this could be related to the width or the number of columns as it doesn't seem to do it on a table with only a few columns. It could even be a css issue though Im struggling to find it.

wjhumphreys

Any Ideas of how to solve this.

allan

Can you link to the pages we can take a look please?

Allan

wjhumphreys

Ill set something up with a lot of data and email you. :-)

allan

Hi,

Thanks for the e-mail. The problem is being caused by the use of a non-pixel value for the scrollY option (specifically an em value is used).

This is causing a problem because when Scroller takes the height of the container, it has been removed from the DOM during the initialisation. As a result the best jQuery can do is a parseInt of the assigned height.

There are a couple of workarounds:

1. Call scroller().measure() in initComplete: this.api().scroller().measure();
2. Specify the height in pixels rather than em.

I'm not 100% sure what the best fix is going to be for this. I've created a github issue for it as it might require a bit of re-architecting in DataTables...

Allan

wjhumphreys

Cheers for that I will have a fiddle :-)

wjhumphreys

The following worked perfectly

"initComplete": function (settings, json) {    
        this.api().scroller().measure(); 
 },