this is an angularjs directive used for pagination.
<link href="lib/ng-pagination.min.css" rel="stylesheet" /><script src="../angularjs/angular-1.2.21.min.js"></script>
<script src="lib/ng-pagination.min.js"></script>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;
});set page-count,current-page and on-page-change as below
<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></pager>| 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 :)