We have MongoDB and a collection in it. The mongoose-paginate plugin is used for paging. The answer comes in this format:

{ docs:Array[10], // массив Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² с Π½ΡƒΠΆΠ½ΠΎΠΉ страницы limit:10, // количСство элСмСнтов Π½Π° страницС page:1, // Π½ΠΎΠΌΠ΅Ρ€ страницы pages:9, // количСство страниц total:88 // всСго записСй ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… критСриям Π²Ρ‹Π±ΠΎΡ€ΠΊΠΈ } 

To generate the buttons I wrote this filter:

 /*global angular*/ // /src/js/filters/range.filter.js (function () { 'use strict'; angular .module('App') .filter('range', range); /** * Π€ΠΈΠ»ΡŒΡ‚Ρ€ Angular * * @constructor * @name range * * @return {Function} Π’Π΅Ρ€Π½Π΅Ρ‚ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ для массива */ function range() { /** * Π€ΠΈΠ»ΡŒΡ‚Ρ€ создаСт ΠΈΠ· Π²Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ массива input массив чисСл Π΄Π»ΠΈΠ½ΠΎΠΉ total * * @method * * @param {Array} input ΠŸΡƒΡΡ‚ΠΎΠΉ массив * @param {Number} total ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ страниц * @param {Number} current ВСкущая страница * @param {Number} max ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΠΏΠΎΠΊΠ°Π·Π° * * @return {Array} Массив с числовыми элСмСнтами Π΄Π»ΠΈΠ½ΠΎΠΉ max * * @example * <li ng-repeat="num in [] | range:88:2:5">{{num}}</li> * // создаст массив для Π²Ρ‹Π²ΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ страницы */ return function(input, total, current, max) { console.log("total, current, max:", total, current, max); var total = parseInt(total); var current = parseInt(current); var max = parseInt(max); if(current > (total-max)){ current = current-max; } for (var i=current; i<=(current+max); i++) { if(i <= total){ input.push(i); } } return input; }; } //range.$inject = []; })(); 

I give screenshots of what happened: enter image description here

enter image description here

enter image description here

Che can not come up with the logic of generation. Will you help?

    1 answer 1

    angularJS has a ready- made solution , use it, do not invent new bikes.

    here is a description of custom controls.

    And here is the solution for your problem.

    Js:

      .controller('UsersController', function($scope, $http) { $scope.users = []; $scope.totalUsers = 0; $scope.usersPerPage = 25; // this should match however many results your API puts on one page getResultsPage(1); $scope.pagination = { current: 1 }; $scope.pageChanged = function(newPage) { getResultsPage(newPage); }; function getResultsPage(pageNumber) { // this is just an example, in reality this stuff should be in a service $http.get('path/to/api/users?page=' + pageNumber) .then(function(result) { $scope.users = result.data.Items; $scope.totalUsers = result.data.Count }); } }) 

    HTML

      <div ng-controller="UsersController"> <table> <tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current"> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </table> <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls> </div> 
    • Yes, I tried it already. It did not start. It is necessary to rewrite a lot under this ready-made solution. It's easier to think out the algorithm. But in any case, thanks for the advice. - Lech
    • one
      I took ( angular-ui.imtqy.com/bootstrap/#/pagination ) and everything turned out. But your advice is also good, I just start to get acquainted only with an angular. - Lech