如何在Kendo UI v2020中实现前端ListView分页？

由于Kendo UI v2020.3.915版本的ListView不支持scrollable: "endless"配置，且原生pageable配置需配合手动关联分页控件实现，以下提供两种适配该版本的前端分页方案，均适用于后端返回全量10000+条数据的场景：

一、传统分页组件方案 #

适合需要明确页码导航的场景，通过ListView结合Kendo分页控件实现点击分页。

完整实现代码 #

<div id="listView"></div>
<!-- 分页控件容器 -->
<div id="pager"></div>

<script type="text/x-kendo-tmpl" id="itemTemplate">
    <div class="product-card k-widget">
        <dl>
            <dt>产品名称</dt>
            <dd>#: ProductName #</dd>
            <dt>单价</dt>
            <dd>#: kendo.toString(UnitPrice, "c") #</dd>
            <dt>库存数量</dt>
            <dd>#: UnitsInStock #</dd>
        </dl>
    </div>
</script>

<script>
$(document).ready(function() {
    // 模拟后端返回的全量数据
    var fullData = (function() {
        var data = [];
        for(let i = 1; i <= 10000; i++) {
            data.push({
                ProductName: "产品" + i,
                UnitPrice: Math.floor(Math.random() * 100) + 10,
                UnitsInStock: Math.floor(Math.random() * 50)
            });
        }
        return data;
    })();

    // 配置前端分页的DataSource
    var dataSource = new kendo.data.DataSource({
        data: fullData,
        pageSize: 10, // 每页显示10条
        serverPaging: false // 必须设为false，启用前端分页
    });

    // 初始化ListView
    $("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#itemTemplate").html()),
        navigatable: true
    });

    // 初始化分页控件并关联DataSource
    $("#pager").kendoPager({
        dataSource: dataSource,
        pageSizes: [10, 20, 50], // 可选每页条数
        buttonCount: 5 // 显示的页码按钮数量
    });
});
</script>

<style>
.product-card {
    float: left;
    width: 220px;
    margin: 10px;
    padding: 15px;
    box-sizing: border-box;
}
</style>

二、滚动加载分页方案（模拟无限滚动） #

适合无需页码导航的场景，通过监听滚动事件手动触发下一页加载，弥补v2020版本缺少内置无限滚动的缺陷。

完整实现代码 #

<div id="scrollContainer" style="height: 450px; overflow-y: auto; border: 1px solid #ddd;">
    <div id="listView"></div>
    <!-- 加载状态提示 -->
    <div id="loadingTip" style="display:none; text-align:center; padding:15px; color:#666;">加载中...</div>
</div>

<script type="text/x-kendo-tmpl" id="itemTemplate">
    <div class="product-item k-widget">
        <dl>
            <dt>产品名称</dt>
            <dd>#: ProductName #</dd>
            <dt>单价</dt>
            <dd>#: kendo.toString(UnitPrice, "c") #</dd>
            <dt>库存数量</dt>
            <dd>#: UnitsInStock #</dd>
        </dl>
    </div>
</script>

<script>
$(document).ready(function() {
    // 模拟后端返回的全量数据
    var fullData = (function() {
        var data = [];
        for(let i = 1; i <= 10000; i++) {
            data.push({
                ProductName: "产品" + i,
                UnitPrice: Math.floor(Math.random() * 100) + 10,
                UnitsInStock: Math.floor(Math.random() * 50)
            });
        }
        return data;
    })();

    var dataSource = new kendo.data.DataSource({
        data: fullData,
        pageSize: 20, // 每次滚动加载20条
        serverPaging: false,
        schema: {
            total: function(data) {
                return data.length; // 返回总数据条数
            }
        }
    });

    // 初始化ListView
    $("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#itemTemplate").html())
    });

    var scrollContainer = $("#scrollContainer");
    var loadingTip = $("#loadingTip");
    var isLoading = false;

    // 监听滚动事件，触发下一页加载
    scrollContainer.scroll(function() {
        // 判断是否滚动至容器底部20px范围内
        if (scrollContainer.scrollTop() + scrollContainer.innerHeight() >= scrollContainer[0].scrollHeight - 20) {
            // 避免重复加载，且需存在未加载的页码
            if (!isLoading && dataSource.page() < dataSource.totalPages()) {
                isLoading = true;
                loadingTip.show();
                // 加载下一页
                dataSource.page(dataSource.page() + 1);
            }
        }
    });

    // 数据加载完成后重置加载状态
    dataSource.bind("change", function() {
        isLoading = false;
        loadingTip.hide();
    });
});
</script>

<style>
.product-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
}
</style>

关键注意事项 #

1. 两种方案均为前端分页，必须将DataSource的serverPaging设为false，确保数据在客户端完成分页处理
2. 分页组件方案中，v2020版本的ListView无法直接通过pageable: true渲染分页控件，需单独初始化kendoPager并关联DataSource
3. 滚动加载方案通过监听容器滚动事件手动控制分页，需添加加载状态标记避免重复触发请求

内容的提问来源于stack exchange，提问作者diegobarriosdev