Use Custom Paging

If the built-in paging buttons are not your style, you can create your own custom buttons. Building on the Quick Start example, you can create custom paging buttons using the pageIndex option in the script, and button markup in the body of the HTML page.

For example, the script, markup and css below define custom buttons using the allowPaging, pageSize, and pagerSettings options. The seekPage function uses the pageIndex option to set the page to show when buttons are clicked.

Live Widget
Script
Markup
CSS

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowPaging: true, 
            pageSize: 3, 
            pagerSettings: { position: "none", pageButtonCount:"2"}, 
            cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
                [1, 'United States', 'Curry, John', 'G'],
                [23, 'Canada', 'Aalto, Antti', 'C', 'L'],
                [45, 'Canada', 'Acton, Keith', 'C', 'R'],
                [69, 'Canada', 'Ahern, Fred', 'RW', 'R'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
   function seekPage(offset) { 
    var index = $("#wijgrid").wijgrid("option", "pageIndex"); 
    index += offset; 
       $("#wijgrid").wijgrid("option", "pageIndex", index); 

        var currentPage = $("#wijgrid").wijgrid("option", "pageIndex") + 1; 
        $("#currentPage").text(currentPage); 
     } 
</script>

<table id="wijgrid">
</table>
 <div> 
<button title="first page" class="pagebuttons" onclick="seekPage(-1000000)"><span class="ui-icon ui-icon-seek-first" /></button> 
<button title="previous page" class="pagebuttons" onclick="seekPage(-1)"><span class="ui-icon ui-icon-seek-prev" /></button> 
<span class="pagebuttontext" id="currentPage">1</span>
<button title="next page" class="pagebuttons" onclick="seekPage(+1)"><span class="ui-icon ui-icon-seek-next" /></button> 
<button title="last page" class="pagebuttons" onclick="seekPage(+1000000)"><span class="ui-icon ui-icon-seek-end" /></button> 
</div>

<style type="text/css">
    .pagebuttons
    {
        float : left;
    }
    .pagebuttontext
    {
        float : left;
        width : 20px;
        text-align : center;
    }
</style>

Concepts

Reference

Widgets