DHTMLX Docs & Samples Explorer

### Custom paging

Paging template A
Paging template B
Paging template C
Source

    <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>