DHTMLX Grid

HTML file

<div id='grid-region'>

</div>

<div class="loading-image" id="table-ajax-loader"> </div> <!-- Add a Spinner if needed -->

<div> <!-- Style this if needed -->
  <div id="pagingArea"></div>&nbsp;
  <div id="infoArea"></div>
</div>

Javascript to initialize DHTMLX Grid

//Must include these DHTMLX Pro Javascripts
'dhtmlxcommon',
'dhtmlxgrid',
'dhtmlxgridcell',
'dhtmlxgrid_json',
'dhtmlxgrid_splt',
'dhtmlxgrid_pgn',
'dhtmlxtoolbar',
'dhtmlxgrid_srnd',
    
// Initializing the Table Grid 

var per_page = 10;
mygrid = new dhtmlXGridObject('grid-region'); // 'grid-region' is ID of the Grid region 
mygrid.setImagePath('/vendor/dhtmlx/imgs/'); // DHTMLX images path
mygrid.setSkin("dhx_terrace"); // Sets Skin
mygrid.setHeader("Column 1, Column2, Column 3"); // Display these column names in table
mygrid.setColumnIds("col1,col2,col3"); // Object ID returned from JSON
mygrid.setInitWidths("150,200,130"); // Width of the Column
mygrid.enableAutoHeight(true); //Enables auto height. This is important because sometimes rows will be hidden.
mygrid.enableAutoWidth(true); // Enables auto width.
mygrid.setEditable(false);
mygrid.attachEvent("onXLS",function(){ document.getElementById("table-ajax-loader").style.display="block"; }); // Show spinner while loading data
mygrid.attachEvent("onXLE",function(){ document.getElementById("table-ajax-loader").style.display="none"; }); // hide spinner after loading data
mygrid.enablePaging(true, per_page, per_page, "pagingArea", true, "infoArea"); // Check http://docs.dhtmlx.com/grid__paging.html
mygrid.setPagingSkin("toolbar", "dhx_skyblue"); // Sets skin for pagination. Check http://docs.dhtmlx.com/grid__paging.html
mygrid.init();
mygrid.load("/get/feeds?count="+per_page+"&posStart=0", "js"); // 'js' Expects a JS Object. Always add params count and posStart for pagination.Next page params will be taken care by DHTMLX paginate 

Server: Querying Table Data

var posStart = request.query.posStart;
var count = request.query.count;
var offset = typeof(posStart) == "object" ? posStart[posStart.length-1] : posStart; //posStart is object from 2nd page and string at 1st page
var len = typeof(count) == 'object' ? count[count.length-1] : count; //count is object from 2nd page and string at 1st page
// Query database or send a request to get the data here by using len & offset variables
// len is the length of data required from server
// offset - Record from which the data is required. 
// For Example: len = 10, offset = 0  // Get record 1 to 10 from server. 
// For Example: len = 10, offset = 10  // Get record 11 to 20 from server. 

// Build JSON in this format and send to the server -check Native JSON format at http://docs.dhtmlx.com/grid__data_formats.html#jsonformat N
data= {"total_count":total_count_of_table_records, "pos":offset, "data":[
  { "col1": "A Time to Kill",
    "col2": "John Grisham",
    "col3": "100"
  },
  { "col1": "Blood and Smoke",
    "col2": "Stephen King",
    "col3": "1000"
  },
  { "col1": "The Rainmaker",
    "col2": "John Grisham",
    "col3": "-200"
  }
]};