On scroll start=NaN ?

On scroll start=NaN ?

wpsdwpsd Posts: 8Questions: 1Answers: 0

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
}

Answers

  • wpsdwpsd Posts: 8Questions: 1Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • wpsdwpsd Posts: 8Questions: 1Answers: 0

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

  • wpsdwpsd Posts: 8Questions: 1Answers: 0

    Ok here is the example

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

    First load ok, on scroll start is NaN

  • wpsdwpsd Posts: 8Questions: 1Answers: 0
    edited March 2019

    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() {}
      });
    }
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • wpsdwpsd Posts: 8Questions: 1Answers: 0
    edited March 2019

    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

  • wpsdwpsd Posts: 8Questions: 1Answers: 0

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • wpsdwpsd Posts: 8Questions: 1Answers: 0

    Ok I will wait for the release then, thanks.

  • adars47adars47 Posts: 1Questions: 0Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.