Angularjs分页

1.编写插件指令，见附件，

样式基于bootstrap写的，想修改样式，写个样式文件覆盖即可

2.界面注入指令及样式

<pagination conf="paginationConf"></pagination> conf参数是controller里传递的

<table class="table table-hover">

<thead>

<th align="center"><input type="checkbox" name="checkAll" ng-model="master" ng-click="checkAll(master,stuDatas);"/></th>

<th>学号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>电话</th>

<th>邮箱</th>

<th align="center"><span>操作</span></th>

</thead>

<tbody>

<tr ng-repeat="stuData in stuDatas">

<td><input type="checkbox" name="checkItem" ng-model="x" ng-checked="master" ng-click="checkItem(stuData.id,x);"/></td>

<td>{{stuData.studentNo}}</td>

<td>{{stuData.studentName}}</td>

<td>{{stuData.studentSex}}</td>

<td>{{stuData.studentAge}}</td>

<td>{{stuData.studentPhone}}</td>

<td>{{stuData.studentEmail}}</td>

<td align="center">

<button type="button" class="btn btn-info" style="margin-right:15px;" ng-click="modifyStu(stuData.id);">修改</button>

<button type="button" class="btn btn-danger" ng-click="removeStu(stuData.id);">删除</button>

</td>

</tr>

</tbody>

</table>

3.编写controller

var commonModel = new CommonModel();

//获取学生列表/分页

$scope.paginationConf = {

currentPage: 1,//当前页

totalItems: 80,//初始总页数

itemsPerPage: 10,//每页条目

pagesLength: 8,//分页长度

perPageOptions: [10, 20, 30, 40, 50],//长度选项

onChange: function(){console.log(11);

console.log($scope.paginationConf.itemsPerPage)

/**

* 触发的函数 动态改变煤业数据及总页数

*/

commonModel.getStu($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage).then(function(response){

$scope.paginationConf.totalItems=response.total;

$scope.stuDatas = response.datas;

});

}

};

4.分页注意

返回数据必包含：总条数及每页数据，即示例中的response.total与response.datas，

附件中是示例中返回的json结构

 

 

stuSystemApp.directive('pagination',[function(){

return {

restrict: 'EA',

template: '<div class="page-list">' +

'<ul class="pagination" ng-show="conf.totalItems > 0">' +

'<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span>&laquo;</span></li>' +

'<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +

'ng-click="changeCurrentPage(item)">' +

'<span>{{ item }}</span>' +

'</li>' +

'<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span>&raquo;</span></li>' +

'</ul>' +

'<div class="page-total" ng-show="conf.totalItems > 0">' +

'每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions " ng-change="changeItemsPerPage()"></select>' +

'/共<strong>{{ conf.totalItems }}</strong>条 ' +

'跳转至<input type="text" ng-model="jumpPageNum" ng-keyup="jumpPageKeyUp($event)"/>' +

'</div>' +

'<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +

'</div>',

replace: true,

scope: {

conf: '='

},

link: function(scope, element, attrs) {

var conf = scope.conf;

// 默认分页长度

var defaultPagesLength = 9;

// 默认分页选项可调整每页显示的条数

var defaultPerPageOptions = [10, 15, 20, 30, 50];

// 默认每页的个数

var defaultPerPage = 15;

// 获取分页长度

if(conf.pagesLength) {

// 判断一下分页长度

conf.pagesLength = parseInt(conf.pagesLength, 10);

if(!conf.pagesLength) {

conf.pagesLength = defaultPagesLength;

}

// 分页长度必须为奇数，如果传偶数时，自动处理

if(conf.pagesLength % 2 === 0) {

conf.pagesLength += 1;

}

} else {

conf.pagesLength = defaultPagesLength

}

// 分页选项可调整每页显示的条数

if(!conf.perPageOptions){

conf.perPageOptions = defaultPagesLength;

}

// pageList数组

function getPagination(newValue, oldValue) {

// conf.currentPage

if(conf.currentPage) {

conf.currentPage = parseInt(scope.conf.currentPage, 10);

}

if(!conf.currentPage) {

conf.currentPage = 1;

}

// conf.totalItems

if(conf.totalItems) {

conf.totalItems = parseInt(conf.totalItems, 10);

}

// conf.totalItems

if(!conf.totalItems) {

conf.totalItems = 0;

return;

}

// conf.itemsPerPage

if(conf.itemsPerPage) {

conf.itemsPerPage = parseInt(conf.itemsPerPage, 10);

}

if(!conf.itemsPerPage) {

conf.itemsPerPage = defaultPerPage;

}

// numberOfPages

conf.numberOfPages = Math.ceil(conf.totalItems/conf.itemsPerPage);

// 如果分页总数>0，并且当前页大于分页总数

if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){

scope.conf.currentPage = scope.conf.numberOfPages;

}

// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中

var perPageOptionsLength = scope.conf.perPageOptions.length;

// 定义状态

var perPageOptionsStatus;

for(var i = 0; i < perPageOptionsLength; i++){

if(conf.perPageOptions[i] == conf.itemsPerPage){

perPageOptionsStatus = true;

}

}

// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中

if(!perPageOptionsStatus){

conf.perPageOptions.push(conf.itemsPerPage);

}

// 对选项进行sort

conf.perPageOptions.sort(function(a, b) {return a - b});

// 页码相关

scope.pageList = [];

if(conf.numberOfPages <= conf.pagesLength){

// 判断总页数如果小于等于分页的长度，若小于则直接显示

for(i =1; i <= conf.numberOfPages; i++){

scope.pageList.push(i);

}

}else{

// 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）

// 计算中心偏移量

var offset = (conf.pagesLength - 1) / 2;

if(conf.currentPage <= offset){

// 左边没有...

for(i = 1; i <= offset + 1; i++){

scope.pageList.push(i);

}

scope.pageList.push('...');

scope.pageList.push(conf.numberOfPages);

}else if(conf.currentPage > conf.numberOfPages - offset){

scope.pageList.push(1);

scope.pageList.push('...');

for(i = offset + 1; i >= 1; i--){

scope.pageList.push(conf.numberOfPages - i);

}

scope.pageList.push(conf.numberOfPages);

}else{

// 最后一种情况，两边都有...

scope.pageList.push(1);

scope.pageList.push('...');

for(i = Math.ceil(offset / 2) ; i >= 1; i--){

scope.pageList.push(conf.currentPage - i);

}

scope.pageList.push(conf.currentPage);

for(i = 1; i <= offset / 2; i++){

scope.pageList.push(conf.currentPage + i);

}

scope.pageList.push('...');

scope.pageList.push(conf.numberOfPages);

}

}

scope.$parent.conf = conf;

}

// prevPage

scope.prevPage = function() {

if(conf.currentPage > 1){

conf.currentPage -= 1;

}

getPagination();

if(conf.onChange) {

conf.onChange();

}

};

// nextPage

scope.nextPage = function() {

if(conf.currentPage < conf.numberOfPages){

conf.currentPage += 1;

}

getPagination();

if(conf.onChange) {

conf.onChange();

}

};

// 变更当前页

scope.changeCurrentPage = function(item) {

if(item == '...'){

return;

}else{

conf.currentPage = item;

getPagination();

// conf.onChange()函数

if(conf.onChange) {

conf.onChange();

}

}

};

// 修改每页展示的条数

scope.changeItemsPerPage = function() {

// 一发展示条数变更，当前页将重置为1

conf.currentPage = 1;

getPagination();

// conf.onChange()函数

if(conf.onChange) {

conf.onChange();

}

};

// 跳转页

scope.jumpToPage = function() {

num = scope.jumpPageNum;

if(num.match(/\d+/)) {

num = parseInt(num, 10);

if(num && num != conf.currentPage) {

if(num > conf.numberOfPages) {

num = conf.numberOfPages;

}

// 跳转

conf.currentPage = num;

getPagination();

// conf.onChange()函数

if(conf.onChange) {

conf.onChange();

}

scope.jumpPageNum = '';

}

}

};

scope.jumpPageKeyUp = function(e) {

var keycode = window.event ? e.keyCode :e.which;

if(keycode == 13) {

scope.jumpToPage();

}

}

scope.$watch('conf.totalItems', function(value, oldValue) {

// 在无值或值相等的时候，去执行onChange事件

if(!value || value == oldValue) {

if(conf.onChange) {

conf.onChange();

}

}

getPagination();

})

}

};

}]);

 

 

{"currendPage":1,"datas":[{"course":{"courseName":"中国"},"courseId":7,"id":1,"studentAge":0,"studentName":"中国"},{"course":{"courseName":"澳门"},"courseId":8,"id":2,"studentAge":0,"studentName":"澳门"},{"course":{"courseName":"四川"},"courseId":9,"id":3,"studentAge":0,"studentName":"四川"},{"course":{"courseName":"广东"},"courseId":10,"id":4,"studentAge":0,"studentName":"广东"},{"course":{"courseName":"辽宁"},"courseId":11,"id":5,"studentAge":0,"studentName":"辽宁"},{"course":{"courseName":"江苏"},"courseId":12,"id":6,"studentAge":0,"studentName":"江苏"},{"course":{"courseName":"青海"},"courseId":13,"id":7,"studentAge":0,"studentName":"青海"},{"course":{"courseName":"新疆"},"courseId":14,"id":8,"studentAge":0,"studentName":"新疆"},{"course":{"courseName":"浙江"},"courseId":15,"id":9,"studentAge":0,"studentName":"浙江"},{"course":{"courseName":"贵州"},"courseId":16,"id":10,"studentAge":0,"studentName":"贵州"}],"endIndex":10,"pages":4,"startIndex":1,"total":32}