DHTMLX Docs & Samples Explorer

Paginal Output. Bricks Skin

You can use skin "bricks" (included in library by default) for paginal output. It has some variants of color schema which are applied to grid skins automatically:





Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxgrid_pgn_bricks.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>
function doOnLoad() {
    initGrid("1", "modern");
    initGrid("2", "light");
    initGrid("3", "dhx_skyblue");
}
function initGrid(ind, skin) {
    var mygrid = new dhtmlXGridObject('gridbox' + ind);
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Column A, Column B");
    mygrid.setInitWidths("100,*");
    mygrid.setColAlign("right,left");
    mygrid.setColTypes("ro,ed");
    mygrid.setColSorting("str,str");
    mygrid.enablePaging(true, 10, 3, "pagingArea" + ind, true);
    mygrid.setSkin(skin);
    mygrid.setPagingSkin("bricks");
    mygrid.init();
    mygrid.loadXML("../common/smartrend.xml");
}
</script> <table style="width:480px; table-layout:fixed;"> <tr> <td id="recinfoArea"></td> </tr> <tr> <td> <div id="gridbox1" style="width:100%;height:150px;background-color:white;overflow:hidden"></div> <div id="pagingArea1"></div> <br><br> <div id="gridbox2" style="width:100%;height:150px;background-color:white;overflow:hidden"></div> <div id="pagingArea2"></div> <br><br> <div id="gridbox3" style="width:100%;height:150px;background-color:white;overflow:hidden"></div> <div id="pagingArea3"></div> </td> </tr> <tr> <td id="pagingArea"></td> </tr> </table>