Kendo UI for jQuery R3 2020 SP2試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

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()方法。建立引用后，請使用 來控制其操作。

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