前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JQuery angular.js 的页码组件ng pagination
简介
ng pagination 是 angular.js 的页码JQuery组件，基于 directive 实现，样式使用的 bootstrap。
（下载的附件中附有DEMO）
 |
|---|
参数说明：
| 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 |
使用
1. 引入文件
<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>
2. HTML
<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></pager>3. 调用
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;
});相关链接
GitHub 地址 ：https://github.com/leonwgc/angularjs-pagination
Gitee 地址：https://gitee.com/mqycn/ng-pagination