Demand pagination with Angular or JavaScript


How to make a paging on demand with AngularJS? I have 2 particularities:

1 - You can not use jQuery, just Angular or pure JavaScript.

2 - I have 2 methods the prevPage and nextPage . Here are some examples of the methods:

 $scope.prevPage = function(page){
    if($scope.currentPage-1 > 0){

$scope.nextPage = function(page){
    if($scope.currentPage+1 <= $scope.numberOfPages){

Here, to be more visible, you have HTML:

<ul class="pagination">
    <li class="glyphicon glyphicon-chevron-left" ng-click="prevPage(currentPage-1)" ng-class="{disabled: currentPage == 1}"></li>
    <li ng-repeat="i in numberOfPagesArr track by $index" ng-class="{active: $index+1 == currentPage}" ng-click="changePage($index+1)">{{$index+1}}</li>
    <li class="glyphicon glyphicon-chevron-right" ng-click="nextPage(currentPage+1)" ng-class="{disabled: currentPage == numberOfPages}"></li>

It's currently up and running, but the page loads only 10 paging pages, but if you increase the number it will surely break.

Here's an example of paging in question of how I want to do it.

asked by anonymous 22.05.2014 / 20:06

3 answers


What you need is the Angular-UI . Among other components it provides Pagination .

See the project goal:


Native AngularJS (Angular) directives for Bootstrap. Small footprint (5kB gzipped!), 3rd party JS dependencies (jQuery, JS bootstrap) required!

Or, it depends only on bootstrap.css . All of the dynamic behavior was done directly in JavaScript and Angular and does not depend on jQuery or bootstrap.js .

28.05.2014 / 14:13
var c = sualistaEmJson;
$scope.totalPorPagina = 10;
$scope.totalRegistro = c.length;
$scope.pagina = [];
var p = $scope.totalRegistro > $scope.totalPorPagina ? Math.ceil($scope.totalRegistro / $scope.totalPorPagina) : 1;
for (var i = 0; i < p; i++) {
     $scope.pagina.push(c.splice(0, $scope.totalPorPagina));
$scope.lista = $scope.pagina[0];
insira o código aqui
//função chamada no ngClick;
$scope.loadListPagination = function (i) {
        $scope.lista = $scope.pagina[i];
//HTML fica assim
<div ng-repeat="x in lista">
<nav ng-show="totalPorPagina < totalRegistro">
        <ul class="pagination">
            <li ng-repeat="p in pagina">
                <a href ng-click="loadListPagination($index)" style="background-color: #777;">
                    {{$index + 1}}
14.05.2015 / 13:48

Here's how to do it: link

It's basically like this:

Use dirPaginate . You need to download it here , then start it on your page:

<script src="dirPagination.js"></script>

And put it as a dependency on your main module:

var app = angular.module('guerraTI', ['angularUtils.directives.dirPagination']);

Now to turn paging on, simply replace ng-repeat with the dir-paginate directive. The only parameter that needs to be added is itemsPerPage, which as the name itself says, is the amount of records that will be shown on each page.

<tr dir-paginate="dado in dados|filter:procurar|orderBy:sortKey:reverse|itemsPerPage:5">

After this, you can place the paging controls:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>
08.06.2016 / 21:47