Kendo UI for jQuery数据管理使用教程：Pager概述

AABBbaby

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选项。

注意：您可以使用远程数据源替代本地数据数组。 在本示例中，为简洁起见，使用了本地数组。

[HTML] 纯文本查看 复制代码

<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来控制其操作。

[JavaScript] 纯文本查看 复制代码

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

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！