彩票走势图

jQuery UI组件库Kendo UI for jQuery数据管理使用教程:Pager概述

翻译|使用教程|编辑:龚雪|2020-11-25 10:21:03.717|阅读 112 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Kendo UI Pager大概的情况,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery R3 2020 SP2试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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");


 

慧都2020年终大促

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP