jQuery Pager Getting Started

Home >Shield UI Documentation >Pager >JavaScript >jQuery Pager Getting Started

The Pager widget can be used to display paging navigation controls for other data-bound controls. In order to take advantage of the functionalities offered by our pager component, you will need to:
1. Include references to all required scripts.

<!DOCTYPE html>
<html>
<head>
<title>Shield Pager</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

...

</body>
</html>

2. Add the control declaration along with the desired properties.

    <div id="pager"></div>
    <script type="text/javascript">
    $(function () {
        $("#pager").shieldPager({
            totalItems: 99,
            events: {
	            change: function (e) {
		            alert(e.currentPage);
	            }
            }
        });
    });

    </script>

Accessing the pager

You can find the grid by its container id:


function getPager() {
    var pager=  $("#pager").swidget();
    return pager;
}