瞭解一下這款jQuery UI組件庫的分頁功能，看如何讓web/移動開發更簡單

點擊獲取工具>>
Kendo UI Pager小部件可以使用靈活直觀的UI將一組數據拆分紅多個頁面。

Pager的用戶界面對於分頁具備數據源且沒有內置分頁的內置UI數據綁定組件頗有用，例如ListView或須要分頁選項的場景，例如帶有數據源的Kendo模板 。

Pager是Kendo UI for jQuery的一部分，後者是一個專業級的UI庫，具備90多個組件，可用於構建現代且功能豐富的應用程序。點擊申請試用>>

您能夠自定義頁碼模板或使用輸入來導航到特定頁面，切換上一個和下一個按鈕的可見性，包括頁面大小下拉列表並更改信息消息，pager API還提供本地化其餘消息的功能。

初始化Pager

要使用Pager，請使用空的<div>元素，並在初始化腳本中提供其設置。

下面的示例演示如何將pager綁定到數據源並啓用pageSizes選項。

注意：您能夠使用遠程數據源替代本地數據數組。 在本示例中，爲簡潔起見，使用了本地數組。

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

功能和特色

• Pager設置和類型
• 響應式Pager
• Pager模板
• 全球化與消息

引用現有實例

要引用現有的Pager實例，請使用jQuery.data()方法。創建引用後，請使用 Pager API來控制其操做。

var pager = $("#pager").data("kendoPager");