On-demand paging with Angular or Javascript

Question

How to make a pagination on demand with Angularjs? I have 2 particularities:

1 - No jQuery, only Angular or pure Javascript can be used.

2 - I have 2 methods the prevPage and nextPage. Below example of the methods:

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

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

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>
</ul>

It is currently working, but the page only loads 10 pages of pagination, but if the number increases it will surely break.

Here you go an example of paging as a matter of how I want to do.

Answer 1

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

See the goal of the project:

Native Angularjs (Angular) Directives for Bootstrap. Small Footprint (5kb gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required!

Or if it depends only on the bootstrap.css. The whole dynamic behavior part was done directly in Javascript and Angular and does not depend on either jQuery or the bootstrap.js.

Answer 2

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">
{{x}}
</div>
<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}}
                </a>
            </li>
        </ul>
    </nav>

Answer 3

Here I explain how to do: https://guerrati.wordpress.com/2016/06/08/angularjs-paginacao-no-ng-repeat/

Basically that’s how:

Utilizes the dirPaginate. You need to get down here, then start it on your page:

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

And put it as a dependency on your core module:

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

Now to activate pagination, simply replace ng-repeat with the dir-paginate directive. The only parameter that needs to be added is itemsPerPage, which as its name already 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 that, you can put the pagination controls:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>