如何在jQuery KendoGrid的分页消息中自定义显示当前页码？

你遇到的这个问题其实挺常见的——Kendo Grid的messages.display配置是在组件初始化时就被解析成固定字符串的，而你存在外部的currentPage变量是分页切换后才更新的，所以初始化时它要么是undefined，后续分页变化也不会自动同步到消息文本里。

下面给你两种靠谱的解决方案，按需选择：

方法一：分页切换时手动更新DOM文本 #

这种方法不用改动默认的分页结构，只在分页变化后替换消息内容，适合只需要修改消息的场景：

// 初始页码设为1（因为Kendo的索引从0开始）
let currentPage = 1;

$("#grid").kendoGrid({
  // 你的其他Grid配置（数据源、列定义等）
  pageable: {
    change: function(e) {
      currentPage = e.index + 1; // 转成用户习惯的从1开始的页码
      // 定位Kendo默认的分页消息元素（class为k-pager-info）
      const pagerInfoEl = $(".k-pager-info");
      if (pagerInfoEl.length) {
        // 结合数据源信息拼接完整消息
        const dataSource = this.dataSource;
        const totalItems = dataSource.total();
        const startItem = dataSource.pageSize() * (currentPage - 1) + 1;
        const endItem = Math.min(startItem + dataSource.pageSize() - 1, totalItems);
        
        pagerInfoEl.text(`当前显示第 ${currentPage} 页（共 ${totalItems} 条数据，当前显示 ${startItem}-${endItem} 条）`);
      }
    },
    // 初始消息，第一次渲染时显示
    messages: {
      display: "当前显示第 1 页"
    }
  }
});

方法二：自定义分页模板（更灵活可控） #

如果需要完全自定义分页区域的样式和内容，用Kendo的pageable.template配置最稳妥，模板函数会自动接收分页相关的上下文数据，直接就能拿到当前页码：

$("#grid").kendoGrid({
  // 你的其他Grid配置
  pageable: {
    template: function(pagerData) {
      // pagerData里包含所有分页相关数据，注意page是从0开始的
      const currentPage = pagerData.page + 1;
      const totalPages = pagerData.totalPages;
      const startItem = pagerData.skip + 1;
      const endItem = Math.min(pagerData.skip + pagerData.pageSize, pagerData.total);
      const totalItems = pagerData.total;

      // 返回自定义的分页HTML结构，保留Kendo的class可以沿用默认样式
      return `
        <div class="k-pager-wrap k-grid-pager">
          <span class="k-pager-info">当前显示第 ${currentPage}/${totalPages} 页（${startItem}-${endItem}，共 ${totalItems} 条）</span>
          <!-- 以下是默认的分页按钮区域，需要保留的话直接复制 -->
          <a href="#" class="k-pager-nav k-pager-prev ${pagerData.page === 0 ? 'k-state-disabled' : ''}">‹</a>
          <ul class="k-pager-numbers k-reset">
            ${Array.from({length: totalPages}, (_, i) => 
              `<li><a href="#" class="k-link ${i === pagerData.page ? 'k-state-selected' : ''}">${i+1}</a></li>`
            ).join('')}
          </ul>
          <a href="#" class="k-pager-nav k-pager-next ${pagerData.page === totalPages -1 ? 'k-state-disabled' : ''}">›</a>
        </div>
      `;
    }
  }
});

小提醒 #

Kendo的分页索引（e.index或pagerData.page）都是从0开始的，所以显示给用户的页码一定要记得加1，避免出现“第0页”的尴尬情况。

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