Kendo Grid paging: текущая страница посередине - PullRequest
Новая
       81

Kendo Grid paging: текущая страница посередине

2 голосов
/ 08 ноября 2019

У меня есть сетка 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 , но не могу найти ни одного параметра, который мог бы включить эту функцию. Я также не смог найти никого, у кого была бы похожая проблема в stackoverflow или какой-либо способ изменить поведение подкачки сетки (кроме подкачки на стороне сервера).

Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 13 ноября 2019

После некоторой работы и некоторого понимания этой статьи мне удалось реализовать эту функцию с помощью события с привязкой к базе данных.

Если кто-то захочет попробовать, просто вставьте следующий код в 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>
...