jQuery UI組件庫Kendo UI for jQuery數據管理使用教程：ListView分頁

---

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

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庫。

默認情況下，ListView的分頁功能處于禁用狀態。

入門指南

要啟用分頁，請實例化單獨的pager控件并將其綁定到相同的DataSource。

<div id="listview"></div>
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ id: 1, item: "Item 1" },
{ id: 2, item: "Item 2" },
{ id: 3, item: "Item 3" },
{ id: 4, item: "Item 4" },
{ id: 5, item: "Item 5" },
{ id: 6, item: "Item 6" }
],
pageSize: 2
});

$("#listview").kendoListView({
dataSource: dataSource,
template: "<div>#: item #</div>"
});

$("#pager").kendoPager({
dataSource: dataSource
});
</script>

高級配置

當綁定到ListView的項目數大于預期時，pager將控制顯示的項目。

1. 創建一個用于渲染的目標元素，通常將其放置在ListView附近。

<div id="listView"></div>
<div class="k-page-wrap">
<div id="pager"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="http://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>

 2. 通過其pageable屬性更新ListView配置，以聲明該小部件支持分頁并初始化pager。

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 4
});

$("pager").kendoPager({
dataSource: dataSource
});

$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});

下面的示例演示了建議方法的完整實現。

<div id="listView" style="max-height:400px;overflow:auto;"></div>
<div id="pager"></div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="http://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>

<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
}
});

$("pager").kendoPager({
dataSource: dataSource
});

$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
</script>

---