Demand pagination with Angular or JavaScript

Question

Demand pagination with Angular or JavaScript

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (-2 votes)

3

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.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'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.

javascript angularjs

asked by anonymous 22.05.2014 / 20:06

3 answers

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>

14.05.2015 / 13:48

-2

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

Get HeaderText from a column in a GridView Error making a dynamic insert in PHP

score 3 · Accepted Answer

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 .