Skip to content

Instantly share code, notes, and snippets.

@srikanthjeeva
Last active August 29, 2015 14:13
Show Gist options
  • Save srikanthjeeva/cb926c90beaf78524e16 to your computer and use it in GitHub Desktop.
Save srikanthjeeva/cb926c90beaf78524e16 to your computer and use it in GitHub Desktop.
DHTMLX Grid
<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>
//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
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"
}
]};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment