<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>    
<script type="text/javascript" src="../../codebase/datastore.js"></script>
 
 
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<div id="pagingarea1"></div>
<div id="gridbox2" style="width:600px; height:270px; background-color:white;"></div>
<div id="pagingarea2"></div>
<input type="button" value="delete" onclick='data.remove(data.first())'>
<input type="button" value="add" onclick='data.add({},0)'>
<script>
var data = new dhtmlXDataStore({
    url: "../common/data/reallybigdata.php",
    datatype: "json";
});
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../../codebase/imgs/");
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Count,Name");
mygrid.setColumnIds("Maintainer,Version");
mygrid.init();
mygrid.enablePaging(true, 20, 5, "pagingarea1");
mygrid.sync(data);
 
mygrid2 = new dhtmlXGridObject('gridbox2');
mygrid2.setImagePath("../../../codebase/imgs/");
mygrid2.setSkin("dhx_skyblue");
mygrid2.setHeader("Count,Name");
mygrid2.init();
mygrid2.enablePaging(true, 20, 5, "pagingarea2");
mygrid2.setColumnIds("Maintainer,Package");
mygrid2.sync(data);</script>