angularjs pagination plugin

Module License: MIT

Added by: Sam Deering





Stars: 27

Watchers: 27

Forks: 21



Module Description


this is an angularjs directive used for pagination.



add the style link

<link href="lib/ng-pagination.min.css" rel="stylesheet" />

add the script reference after angular.

<script src="../angularjs/angular-1.2.21.min.js"></script>
<script src="lib/ng-pagination.min.js"></script>

add ng-pagination as the module dependency

in the controller , you get the total page count from an ajax request and set $scope.pageCount and set $scope.onPageChange function to handle page change event, in the handler function you can get currentPage via $scope.currentPage then you can send another ajax request to load data from server. that's it.

var app = angular.module('app', ['ng-pagination']);
  app.controller('demoCtrl', function($scope) {
    $scope.onPageChange = function() {
      // ajax request to load data

    // set pagecount in $scope
    $scope.pageCount = 100;

add pager directive to the view

set page-count,current-page and on-page-change as below

<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></pager>

Customization options

Option Name Description
firstText set the first page button text, e.g first-text="First Page"
default is "First"
lastText set the last page button text, e.g last-text="Last Page"
default is "Last"
prevText set the prev page button text, e.g prev-text="Prev Page"
default is "Prev"
nextText set the next page button text, e.g next-text="Next Page"
default is "Next"
showFirstLastText set whether to show the first and last page button
default is true
showGoto set whether to show the goto textbox
default is false
gotoText set the goto text
default is "Goto Page", only the showGoto option is set to true, it will be shown
showIfOnePage set whether to show the pagination directive when there is only one page
default is false, it will hide when the pagecount equals one
visiblePageCount set the visible page button count. e.g. the pageCount is 100, and the currentPage is 50, it will only show page 45 to page 54
default value is 10


you can open demo/index.html to see it


you can change the default style, and set it you like in ng-pagination.css :)

Module stats last updated: 2018-01-17 16:00:10

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!