Skip to content

Instantly share code, notes, and snippets.

@srikanthjeeva
Created January 22, 2015 22:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
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