Угловая пагинация обратный прыжки

Question

У меня есть эта таблица:

Вот код и Fiddle:

HTML

<table class="table table-striped table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th> 
      <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> 
      <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> 
      <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th> 
      <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th> 
      <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th> 
     </tr> 
    </thead> 
    <tfoot> 
     <td colspan="6"> 
      <div class="pagination pull-right"> 
       <ul> 
        <li ng-class="{disabled: currentPage == 0}"> 
         <a href ng-click="prevPage()">« Prev</a> 
        </li> 

        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " 
         ng-class="{active: n == currentPage}" 
        ng-click="setPage()"> 
         <a href ng-bind="n + 1">1</a> 
        </li> 

        <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}"> 
         <a href ng-click="nextPage()">Next »</a> 
        </li> 
       </ul> 
      </div> 
     </td> 
    </tfoot> 
    <pre>pagedItems.length: {{pagedItems.length|json}}</pre> 
    <pre>currentPage: {{currentPage|json}}</pre> 
    <tbody> 
     <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse"> 
      <td>{{item.id}}</td> 
      <td>{{item.name}}</td> 
      <td>{{item.description}}</td> 
      <td>{{item.field3}}</td> 
      <td>{{item.field4}}</td> 
      <td>{{item.field5}}</td> 
     </tr> 
    </tbody> 
</table> 

JS

function ctrlRead($scope, $filter) { 
    // init 
    $scope.sortingOrder = 'name'; 
    $scope.gap = 5; 
    $scope.cached = 0; 
    $scope.reverse = false; 
    $scope.filteredItems = []; 
    $scope.groupedItems = []; 
    $scope.itemsPerPage = 5; 
    $scope.pagedItems = []; 
    $scope.currentPage = 0; 
    $scope.items = [ 
     {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
     {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
//.... 
    ]; 

    var searchMatch = function (haystack, needle) { 
     if (!needle) { 
      return true; 
     } 
     return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1; 
    }; 

    // init the filtered items 
    $scope.search = function() { 
     $scope.filteredItems = $filter('filter')($scope.items, function (item) { 
      for(var attr in item) { 
       if (searchMatch(item[attr], $scope.query)) 
        return true; 
      } 
      return false; 
     }); 
     // take care of the sorting order 
     if ($scope.sortingOrder !== '') { 
      $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse); 
     } 
     $scope.currentPage = 0; 
     // now group by pages 
     $scope.groupToPages(); 
    }; 

    // calculate page in place 
    $scope.groupToPages = function() { 
     $scope.pagedItems = []; 

     for (var i = 0; i < $scope.filteredItems.length; i++) { 
      if (i % $scope.itemsPerPage === 0) { 
       $scope.pagedItems[Math.floor(i/$scope.itemsPerPage)] = [ $scope.filteredItems[i] ]; 
      } else { 
       $scope.pagedItems[Math.floor(i/$scope.itemsPerPage)].push($scope.filteredItems[i]); 
      } 
     } 
    }; 

    $scope.range = function (size,start, end) { 

     if($scope.cached == start){ 
      start = start - 4; 
      console.log('start',start); 
     } 

     $scope.cached = start; 


     var ret = [];   
     console.log(size,start, end); 

     if(size < 2){return ret;} 

     if (size < end) { 
      end = size; 
      start = size-$scope.gap; 
     } 
     for (var i = start; i < end; i++) { 
      if(i<0) continue; 
      ret.push(i); 
     }   
     console.log(ret);   
     return ret; 
    }; 

    $scope.prevPage = function() { 
     if ($scope.currentPage > 0) { 
      $scope.currentPage--; 
     } 
    }; 

    $scope.nextPage = function() { 
     if ($scope.currentPage < $scope.pagedItems.length - 1) { 
      $scope.currentPage++; 
     } 
    }; 

    $scope.setPage = function() { 
     $scope.currentPage = this.n; 
    }; 

    // functions have been describe process the data for display 
    $scope.search(); 

    // change sorting order 
    $scope.sort_by = function(newSortingOrder) { 
     if ($scope.sortingOrder == newSortingOrder) 
      $scope.reverse = !$scope.reverse; 

     $scope.sortingOrder = newSortingOrder;  
    }; 
}; 
ctrlRead.$inject = ['$scope', '$filter']; 

Из кода видно, что у нас есть 13 групп по 5 рядов.

Если я нажимаю на разбивку на страницы 5, кнопка 5 переходит на 1-е место, а последнее место - 9.

Таким образом, я могу быстро «путешествовать» по всем данным.

Моя проблема в том, что я не знаю, как сделать это, чтобы прыгнуть назад.

Например, если я останусь на 13:

и жму на 9 Я ожидаю, что 9 будет прыгать до конца пагинацией и 1-го элемента в списке будет 5.

Как достичь этого?

Спасибо,

Answer 1

В общем, вы должны отделить идею текущего индекса страницы и индексы ваших страниц навигационных ссылок. Однако есть много способов сделать это. Я сделал это, добавив левый и правый пробел в диапазон, который вы создаете, который лучше контролирует индексы быстрых навигационных кнопок. Так что, когда вы звоните setPage я просто добавить немного проверить:

if (this.n <= $scope.currentPage) { 
    $scope.left_gap = $scope.gap-1; 
    $scope.right_gap = 1; 
} else {    
    $scope.left_gap = 0; 
    $scope.right_gap = $scope.gap; 
} 

Таким образом, при нажатии кнопки в левой части текущей страницы, он будет делать правильные зазоры, так что щелкнул индекс будет справа, но поведение правого клика по-прежнему работает. Вы просто должны использовать:

<li ng-repeat="n in range(pagedItems.length, currentPage - left_gap, currentPage + right_gap) "> 

Это не без его ошибок, хотя, и вы все еще нужно исправить убедившись, что вы всегда держать 5 вокруг, но я оставлю это для вас. Вот fiddle играть.

Надеюсь, это помогло!