<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
 
<style type="text/css" media="screen">
.paging_text{
        font-family: Tahoma;
        font-size: 10pt;
        float: left;
        padding: 3px 10px 0px 10px;
    }
</style>
<div id="data_container" style="border:1px solid #A4BED4; background-color:white; width:710px;height:392px;"></div>
<br>
<div id="paging_here"    style="width:596px;height:46px; "></div>
<script>
data = new dhtmlXDataView({
    container: "data_container",
    type: {
        template: "<span class='dhx_strong'>#Maintainer#</span>#Package# <span class='dhx_light'>#Version#</span>",
        height: 35;
    }
});
pager = data.define("pager", {
    container: "paging_here",
    size: 20;
});
data.load("php/data.php");
function setType(mode) {
    var new_one = "";
    switch (mode) {
    case "a":
        ;
        new_one = "{common.pages()}";
        break;
    case "b":
        ;
        new_one = "{common.first()}{common.pages()}{common.last()}";
        break;
    case "c":
        ;
        new_one = "{common.prev()}<div class='paging_text'>Page {common.page()} from #limit#</div>{common.next()}";
        break;
    }
    pager.define("template", new_one);
}</script>
<div>
<a href="javascript:void(0)" onclick='setType("a");'>Paging template A</a><br />
<a href="javascript:void(0)" onclick='setType("b");'>Paging template B</a><br />
<a href="javascript:void(0)" onclick='setType("c");'>Paging template C</a><br />
</div>