On scroll start=NaN ?

wpsd

Hi I'm using latest Datatables from Download page 1.10.18 with Scroller 1.5.0 ( no theme ).
Loading table is ok, but when scrolling it kept sending start=NaN.

Here is the code

div.gridview {
    margin: 0px;
    width:300px;
    left:0px;
    top:50px;
    bottom:0px;
    z-index: 0;
    display: block;
    visibility: visible;
    overflow:hidden;
    position: absolute;
    padding: 0 !important;
}

<div class="gridview">
    <table class="cell-border">
    </table>
</div>

$(function() {
     load_table("location/list", "location", "Location");
});

function load_table(list_page, column_name, column_label, format_row) {
    var table = $('table').DataTable({
        serverSide: true,
        deferRender: true,
        dom: "frtiS",
        scrollX: false,
        scrollY: ($("div.gridview").height() - 38) + "px",
        scroller: {
            displayBuffer: 5,
        },
        searching: false,
        processing: true,
        select: true,
        info: false,
        bPaginate: true,
        bSearchable: false,
        columns: [{
             "data" : column_name,
             "title" : column_label
        }],
        order: [],
        data: resp.result.data,
        ajax: {
            url: list_page,
            type: "GET",
            dataSrc: function(json) {
                return json.result.data;
            }
        },
        fnDrawCallback: function() {}
    });
}

Ajax call to location/list will retrieve

"result" : {
    "columns": [
        {"data": "location", "title": "Location"},
    ],
    "data" : [
        {"location" : "Somewhere1"}
        ...
    ],
    "recordsTotal" : 1000,
    "recordsFiltered": 1000
}

wpsd

I found that there is a change in length params that send during first loading and after scrolling...

colin

Hi @wpsd ,

I'm not seeing that in this example here. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

wpsd

Hm, I never use jsfiddle before. Will try create a test site..

wpsd

Ok here is the example

https://jsfiddle.net/wpsd2006/413ro2mn/101/

First load ok, on scroll start is NaN

wpsd

This is the full script, in case above jsfiddle gone.
I use jsfiddle /echo/json/ ajax mockup request.

Datatables download options is
Step 1. DataTables
Step 2. jQuery3, DataTables
Step 3. Scroller

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/sc-1.5.0/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/sc-1.5.0/datatables.min.js"></script>

<div class="gridview">
  <table class="cell-border">
  </table>
</div>

div.gridview {
  margin: 0px;
  width: 300px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 0;
  display: block;
  visibility: visible;
  overflow: hidden;
  position: absolute;
  padding: 0 !important;
}

$(function() {
  load_table("/echo/json/", "location", "Location");
});

function clone(Obj) {
  var buf;
  if (Obj instanceof Array) {
    buf = []; // create an empty array
    var i = Obj.length;
    while (i --) {
      buf[i] = clone(Obj[i]); // recursively clone the elements
    }
    return buf;
  } else if (Obj instanceof Object) {
    buf = {}; // create an empty object
    for (var k in Obj) {
      buf[k] = clone(Obj[k]); // recursively clone the value
    }
    return buf;
  } else {
    return Obj;
  }
}

function load_table(list_page, column_name, column_label, format_row) {
  var mockdata = {
    result: {
      data: [],
      recordsTotal: 0,
      recordsFiltered: 0
    }
  };
  
  for (var i = 0; i < 500; i++) {
    mockdata["result"]["data"].push({"location": "location" + i});
  }
  mockdata["result"]["recordsTotal"] =  mockdata["result"]["data"].length;
  mockdata["result"]["recordsFiltered"] =  mockdata["result"]["data"].length;
  
  var table = $('table').DataTable({
    serverSide: true,
    deferRender: true,
    dom: "frtiS",
    scrollX: false,
    scrollY: $("div.gridview").height(),
    scroller: {
      displayBuffer: 10,
    },
    searching: false,
    processing: true,
    select: true,
    info: false,
    bPaginate: true,
    bSearchable: false,
    columns: [{
      "data": column_name,
      "title": column_label
    }],
    order: [],
    data: [],
    ajax: {
      url: list_page,
      type: "POST",
      data: function(d) {
     console.log(d);
         var mockdata_filter = clone(mockdata);
         mockdata_filter["result"]["data"] =  mockdata_filter["result"]["data"].slice(d.start,d.length);
         d.json = JSON.stringify(mockdata_filter);
      },
      dataSrc: function(resp) {
        console.log(resp.result);
        return resp.result.data;
      }
    },
    fnDrawCallback: function() {}
  });
}

allan

I'm not quite getting it I'm afraid. Where on the page is NaN showing?

Allan

wpsd

Open the console tab or Network tab in developer tools. Run the code and then when you scroll the table, the request params given for start is NaN

wpsd

colin

Hi @wpsd ,

Yep, thanks, I was seeing it and explained to Allan how to reproduce - I had thought he was going to respond onto this thread.

It appears it's a bug in the release - if you compare your fiddle to this one, which uses the nightly release of Scroller and doesn't show that odd behaviour.

Sorry for that inconvenience. We hope to release Scroller in the next week or two which will contain the fix - otherwise, the nightly builds should get you going.

Cheers,

Colin

wpsd

Ok I will wait for the release then, thanks.

adars47

so, any updates regarding the fix,the problem i am facing is somewhat similar, but mine initially loads fine for the first few draws but when the "start" reaches above 200 it starts sending NAN. the data is fine because when i increase the length to higher number the table loads fine, it when scrolling to 200 i get that error.

colin

Hi @adars47 ,

Scroller was released at the start of this month, so the fix that's discussed in this thread is now available. If you're seeing a problem, that'll be something different.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin