Pager Overview
The Kendo UI Pager widget enables splitting a set of data into pages with flexible and intuitive UI.
The user interface of the Pager is useful for paging data-bound components that have a data source and do not have a built-in UI for paging such as the ListView or scenarios that require paging options—for example, Kendo Templates with a data source.
The Pager is part of Kendo UI for jQuery, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
You can customize the page number templates or use an input for navigation to a specific page, toggle the visibility of previous and next buttons, include a pagesize dropdown and alter the information messages. The pager API also offers the ability to localize its messages.
Initializing the Pager
To use the Pager, use an empty <div> element and supply its settings in the initialization script.
The following example demonstrates how to tie a pager to a data source and enable the pageSizes option.
- You can use a remote data source instead of an array of local data. The local array is used for brevity in this example.
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageSize: 2
});
$("#pager").kendoPager({
dataSource: dataSource,
pageSizes: [2, 3, 4, "all"]
});
dataSource.read();
</script>
<style>
#pager {
margin-top: 100px;
}
</style>
Functionality and Features
Events
You can subscribe to the Pager events.
Referencing Existing Instances
To refer to an existing Pager instance use the jQuery.data() method. Once a reference is established, use the Pager API to control its behavior.
var pager = $("#pager").data("kendoPager");