How to do paging in AngularJS?

后端 未结 21 1890
轮回少年
轮回少年 2020-11-22 07:17

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

相关标签:
21条回答
  • 2020-11-22 07:51

    I updated Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview so that it uses newer versions of angular, angular-ui, and bootstrap.

    Controller

    var todos = angular.module('todos', ['ui.bootstrap']);
    
    todos.controller('TodoController', function($scope) {
      $scope.filteredTodos = [];
      $scope.itemsPerPage = 30;
      $scope.currentPage = 4;
    
      $scope.makeTodos = function() {
        $scope.todos = [];
        for (i=1;i<=1000;i++) {
          $scope.todos.push({ text:'todo '+i, done:false});
        }
      };
    
      $scope.figureOutTodosToDisplay = function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
        var end = begin + $scope.itemsPerPage;
        $scope.filteredTodos = $scope.todos.slice(begin, end);
      };
    
      $scope.makeTodos(); 
      $scope.figureOutTodosToDisplay();
    
      $scope.pageChanged = function() {
        $scope.figureOutTodosToDisplay();
      };
    
    });
    

    Bootstrap UI component

     <pagination boundary-links="true" 
        max-size="3" 
        items-per-page="itemsPerPage"
        total-items="todos.length" 
        ng-model="currentPage" 
        ng-change="pageChanged()"></pagination>
    
    0 讨论(0)
  • 2020-11-22 07:53

    I recently implemented paging for the Built with Angular site. You chan checkout the source: https://github.com/angular/builtwith.angularjs.org

    I'd avoid using a filter to separate the pages. You should break up the items into pages within the controller.

    0 讨论(0)
  • 2020-11-22 07:54

    I just made a JSFiddle that show pagination + search + order by on each column using btford code: http://jsfiddle.net/SAWsA/11/

    0 讨论(0)
  • 2020-11-22 07:54

    I use this 3rd party pagination library and it works well. It can do local/remote datasources and it's very configurable.

    https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

    <dir-pagination-controls
        [max-size=""]
        [direction-links=""]
        [boundary-links=""]
        [on-page-change=""]
        [pagination-id=""]
        [template-url=""]
        [auto-hide=""]>
        </dir-pagination-controls>
    
    0 讨论(0)
  • 2020-11-22 07:54

    There is my example. Selected button in the middle on the list Controller. config >>>

     $scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};
    

    Logic for pagination:

    /*
         Pagination
         */
        $scope.$watch('pagination.total', function (total) {
            if(!total || total <= $scope.pagination.config.count) return;
            _setPaginationPages(total);
        });
    
        function _setPaginationPages(total) {
            var totalPages = Math.ceil(total / $scope.pagination.config.count);
            var pages = [];
            var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
            var finish = null;
    
            if((start + $scope.pagination.config.size - 1) > totalPages){
                start = totalPages - $scope.pagination.config.size;
            }
            if(start <= 0) {
                start = 1;
            }
    
           finish = start +  $scope.pagination.config.size - 1;
           if(finish > totalPages){
               finish = totalPages;
           }
    
    
            for (var i = start; i <= finish; i++) {
                pages.push(i);
            }
    
            $scope.pagination.pages = pages;
        }
    
        $scope.$watch("pagination.config.page", function(page){
            _setPaginationPages($scope.pagination.total);
            _getRespondents($scope.pagination.config);
        });
    

    and my view on bootstap

    <ul ng-class="{hidden: pagination.total == 0}" class="pagination">
            <li ng-click="pagination.config.page = pagination.config.page - 1"
                ng-class="{disabled: pagination.config.page == 1}" ><a href="#">&laquo;</a></li>
            <li ng-repeat="p in pagination.pages"
                ng-click="pagination.config.page = p"
                ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
            <li ng-click="pagination.config.page = pagination.config.page + 1"
                ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">&raquo;</a></li>
        </ul >
    

    It is useful

    0 讨论(0)
  • 2020-11-22 07:54

    Overview : Pagination using

     - ng-repeat
     - uib-pagination
    

    View :

    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead style="background-color: #eee">
                    <tr>
                        <td>Dispature</td>
                        <td>Service</td>
                        <td>Host</td>
                        <td>Value</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in app.metricsList">
                        <td>{{x.dispature}}</td>
                        <td>{{x.service}}</td>
                        <td>{{x.host}}</td>
                        <td>{{x.value}}</td>
                    </tr>
                </tbody>
            </table>
    
            <div align="center">
                <uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
                    total-items="app.totalItems" boundary-link-numbers="true"
                    ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
                    class="pagination-sm" boundary-links="true"
                    ng-click="app.getPagableRecords()"></uib-pagination>        
    
                <div style="float: right; margin: 15px">
                    <pre>Page: {{app.currentPage}} / {{numPages}}</pre>
                </div>          
            </div>
        </div>
    </div>
    

    JS Controller :

    app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){
    
        var app = this;
        app.currentPage = 1;
        app.maxSize = 5;
        app.itemPerPage = 5;
        app.totalItems = 0;
    
        app.countRecords = function() {
            $http.get("countRecord")
            .success(function(data,status,headers,config){
                app.totalItems = data;
            })
            .error(function(data,status,header,config){
                console.log(data);
            });
        };
    
        app.getPagableRecords = function() {
            var param = {
                    page : app.currentPage,
                    size : app.itemPerPage  
            };
            $http.get("allRecordPagination",{params : param})
            .success(function(data,status,headers,config){
                app.metricsList = data.content;
            })
            .error(function(data,status,header,config){
                console.log(data);
            });
        };
    
        app.countRecords();
        app.getPagableRecords();
    
    }]);
    
    0 讨论(0)
提交回复
热议问题