angularjs-pagination

this is an angularjs directive used for pagination.

Usage

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
      console.log($scope.currentPage);
    };

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

Demo

you can open demo/index.html to see it

Others

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