我有一个启用分页的Kendo网格。当前，例如，如果我在第20页，则分页看起来像这样：
|< < ... 11 12 13 14 15 16 17 18 19 [20] ... > >|
我希望当前页面始终显示在中间：
|< < ... 15 16 17 18 19 [20] 21 22 23 24 25 ... > >|
可以这样做吗？
我已经研究了Kendo API Documentation中的网格分页，但是找不到任何可能启用此功能的选项。我也找不到其他在stackoverflow中有类似问题的人，也找不到任何更改网格分页行为的方法（服务器端分页除外）。
提前感谢您的帮助！
[经过一些工作，并从this article中获得了一些见识，我设法使用数据绑定事件实现了此功能。
如果有人想尝试一下，只需将以下代码粘贴到Kendo UI Dojo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Cheese", category: "Food" },
{ productName: "Milk", category: "Beverages" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" }
],
pageable: {
pageSize: 1,
responsive: false
},
dataBound: onDataBound
});
function onDataBound(e) {
var grid = e.sender
var pager = grid.element.find('ul.k-pager-numbers').first();
if(pager.length){
var max = grid.dataSource.totalPages();
var center = grid.dataSource.page();
var left, right;
if(max <= 11){
left = 1;
right = max;
} else {
left = center-5;
right = center+5;
if(left<1){
right += (1-left);
left = 1;
}
if(right > max){
left -= (right-max);
right = max;
}
}
var new_pager = '<ul class="k-pager-numbers k-reset">';
new_pager += '<li class="k-current-page"><span class="k-link k-pager-nav">'+center+'</span></li>';
for (var l = left; l<center; l++){
new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+l+'">'+l+'</a></li>';
}
new_pager += '<li><span class="k-state-selected">'+center+'</span></li>';
for (var r = center+1; r<=right; r++){
new_pager += '<li><a tabindex="-1" href="#" class="k-link" data-page="'+r+'">'+r+'</a></li>';
}
new_pager += '</ul>';
pager.replaceWith(new_pager);
}
}
</script>
</body>
</html>