Skip to content

Instantly share code, notes, and snippets.

@srikanthjeeva
Created January 22, 2015 22:15
Show Gist options
  • Save srikanthjeeva/10a07ef4ce416b8c0337 to your computer and use it in GitHub Desktop.
Save srikanthjeeva/10a07ef4ce416b8c0337 to your computer and use it in GitHub Desktop.
DHTMLX Dynamic load and pagination
//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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment