Paginal Output:dynamic loading

dhtmlxGrid supports paginal output. You can use it together with dynamical loading or separately.
In the sample below number of rows per page is set to 30 and number of pages per group is set to auto (null) - based on rows in the first portion loaded from server

Autoloading delivers 300 more records each time when previous 300 ones were consumed. Number of total records is 2000.

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxgrid_pgn_bricks.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/ext/dhtmlxgrid_pgn.js"></script>    
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
<script>var mygrid;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Column A, Column B");
    mygrid.setInitWidths("100,*");
    mygrid.setColAlign("right,left");
    mygrid.setColTypes("ro,ed");
    mygrid.enablePaging(true, 30, null, "pagingArea", true, "recinfoArea");
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.setPagingSkin("bricks");
    mygrid.loadXML("php/dynscroll.php");
}</script>
 
 
<table width="600">
    <tr>
        <td id="recinfoArea"></td>
    </tr>
    <tr>
        <td>
            <div id="gridbox" style="width:100%; height:250px; background-color:white;overflow:hidden"></div>
        </td>
    </tr>
    <tr>
        <td id="pagingArea"></td>
    </tr>
</table>
<br>