Wijmo UI for the Web
Markup And Scripting
Wijmo User Guide > Widgets > Pager > Markup And Scripting

The HTML markup for a wijpager widget looks like this.

Markup
Copy Code
<div id="pager">
 </div>

You can initialize the widget with the following jQuery script, which sets the nextPageClass and previousPageClass options to use power and cart icons for the next and previous buttons.

Script
Copy Code
<script type="text/javascript">
    $(document).ready(function () {
        $("#pager").wijpager({
            pageCount: 5,
            pageIndex: 2,
            mode: "nextPrevious",
            nextPageClass: "ui-icon-power",
            previousPageClass: "ui-icon-cart"
        });
    });

</script>

The markup and script featured here results in the following live widget. Note that there are five pages, and the page that has initial focus (pageIndex) is the third one, so that the previous and next buttons are both visible. Click either button multiple times to cause the other button to disappear, when the end of the pageCount is reached.

See Also

Reference