Datatable Scroller

by wpsd2006

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.18/sc-1.5.0/datatables.min.css">
<script 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>

CSS

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;
}

JavaScript

$(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() {}
  });
}