Kendo Grid JSP标签分页按钮无法分页问题求助

维护遗留JSP应用时，使用Kendo UI Grid实现数据展示功能，初始页面加载数据正常，但点击分页按钮后无法触发分页请求，分页控件显示异常（如总条数显示为NaN）。

JSP代码 #

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<html>
    <head>
        <title>Astro Search (Gliese Only)</title>
        <link href="resources/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="resources/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="resources/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
        <link href="resources/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

        <script src="resources/js/jquery.min.js"></script>
        <script src="resources/js/kendo.all.min.js"></script>
        <script src="resources/js/kendo.dataviz.min.js"></script>
    </head>
    <body>
        <h1>Astro Query (Gliese Only)</h1>
        <kendo:grid name="catalogGrid" pageable="true">
            <kendo:grid-columns>
                <kendo:grid-column title="Name" field="name"></kendo:grid-column>
                <kendo:grid-column title="Component" field="component"></kendo:grid-column>
                <kendo:grid-column title="Right Ascension" field="ra"></kendo:grid-column>
                <kendo:grid-column title="Declination" field="dec"></kendo:grid-column>
                <kendo:grid-column title="Spectral Type" field="spectralTypeFull"></kendo:grid-column>
                <kendo:grid-column title="Visual Magnitude" field="visualMagnitude"></kendo:grid-column>
                <kendo:grid-column title="Absolute Magnitude" field="absoluteMagnitude"></kendo:grid-column>
                <kendo:grid-column title="Parallax" field="parallax"></kendo:grid-column>
                <kendo:grid-column title="HD Number" field="hd"></kendo:grid-column>
            </kendo:grid-columns>
            <kendo:dataSource pageSize="25" serverPaging="true" data="data">
                <kendo:dataSource-transport read="/gliese/query">
                </kendo:dataSource-transport>
                <kendo:dataSource-schema data="data" total="total"></kendo:dataSource-schema>
            </kendo:dataSource>
            <kendo:grid-pageable input="true" numeric="false" />
        </kendo:grid>
    </body>
</html>

Spring MVC控制器代码 #

@GetMapping(value="/gliese/query")
public @ResponseBody
DataSourceResult<Gliese> query(@RequestParam Integer take, @RequestParam Integer skip,
                       @RequestParam Integer page, @RequestParam Integer pageSize) {

    // query for result
    return new DataSourceResult<Gliese>(count, take.longValue(), result.getContent());
}

DataSourceResult类定义 #

public class DataSourceResult<T> implements Serializable {

    private Long total;
    private Long pageSize;
    private List<T> data;

    public DataSourceResult() {
    }

    public DataSourceResult(Long total, Long pageSize, List<T> data) {
        this.total = total;
        this.pageSize = pageSize;
        this.data = data;
    }

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public Long getPageSize() {
        return pageSize;
    }

    public void setPageSize(Long pageSize) {
        this.pageSize = pageSize;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

问题排查与解决 #

1. 核心错误：DataSource配置冲突
   在<kendo:dataSource>标签中，data="data"属性是用来绑定本地数据的，与开启的serverPaging="true"（远程分页）完全冲突。设置该属性后，Grid会默认数据已加载到本地，不会触发远程分页请求。

   修复方法：移除<kendo:dataSource>中的data="data"属性，修改后的配置如下：

   <kendo:dataSource pageSize="25" serverPaging="true">
       <kendo:dataSource-transport read="/gliese/query">
       </kendo:dataSource-transport>
       <kendo:dataSource-schema data="data" total="total"></kendo:dataSource-schema>
   </kendo:dataSource>
   

2. 额外校验点

   • 检查后端返回的total字段是否为正确的总记录数，否则分页控件会显示NaN，导致逻辑异常。
   • 通过浏览器开发者工具的Network面板，确认分页请求是否携带take、skip、page、pageSize参数，确保后端能正常接收。

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