angularjs 数据库分页
angularjs的服务端分页解决方案，前端页面采用angularjs和ui-bootstrap的分页写法，后端在服务器中做好分页，其实也比较容易，做好以下几点就行：
页码发生变化时要触发一个页码变化的方法，这样才能发送请求找到下一个页码的内容
保证每次发请求的参数要和第一次查询的时候参数要一致，否则会混乱
保证参数要正确，主要的应该是两个参数，pageSize--> 每页的大小，currentPage --> 当前的页码，把这两个参数一定要传到服务器
服务器数据库中一定要做好分页，一般情况下可以按照入库时间倒序分页，日期最近的在最前面，然后接收来自servlet的currentPage和pageSize参数，返回相应的数据，这样在页面上最近日期的就显示在最前面了，这种做饭用户体验应该是最好的
数据库分页的做法估计和用SQL语言是一样的，我没有做过SQL的分页，我们用的是MONGODB，ui-bootstrap分页的代码在ui-bootstrap的官方网站有非常详细的代码和范例，只是国内的网访问那个网站很慢，而且很有可能加载不出来，所以只能用V*P*N来查看官网内容，官网内容非常有用，不过pagination模块的pageChanged() 方法在template中好像还没有定义出来，所以全部照搬ui-bootstrap的pagination好像不起作用，搞不好就做成了页面分页，而不是服务器分页，就差了这一个关键的方法了。万能的google，通过google我找到了一个自定义指令分页，恰好包含了有pageChanged()方法，太好了，是在github上找到的，不过是用google找到的。如果是数据量少的话其实用页面分页完全没有问题，但是大量数据要传到页面的话肯定要用数据库分页，否则大量数据会把浏览器搞崩溃的，而且搜索速度巨慢无比，严重影响用户体验。
不说别的了，下面就来看代码：
引用的js有：
ng-pagination.js ng-pagination.css
然后是完整的index.html样例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>index</title>
<link href="../src/ng-pagination.css" rel="stylesheet" />
<style type="text/css">
body {
padding: 20px 0 0 20px;
}
.pager {
margin: 20px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="demoCtrl">
<div class="pager">
<mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></mypager>
</div>
<div class="pager">
<mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页"></mypager>
</div>
<div class="pager">
<mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" show-goto="true"></mypager>
</div>
<div class="pager">
<mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></mypager>
</div>
</div>
<script src="../angularjs/angular-1.2.21.min.js"></script>
<script src="../src/ng-pagination.js"></script>
<script type="text/javascript">
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 = 12;
});
</script>
</body>
</html>
原有的指令名称是pager，由于和ui-bootstrap 的 pager 冲突了，加载页面会报错，所以改成了mypager，我试过把ui-bootstrap 的 pager 改掉，我要说这样绝对不是好办法，因为ui-bootstrap 的源代码封装得很好，不是高手不要去改，万一改了个不该改的内容会麻烦死了的。
js中的内容：
;
(function(angular) {
'use strict';
angular.module("ng-pagination", [])
.constant('ngPaginationConfig', {
visiblePageCount: 10,
firstText: 'First',
lastText: 'Last',
prevText: 'Prev',
nextText: 'Next',
showIfOnePage: false,
showFirstLastText: true,
gotoText: 'Goto Page',
showGoto: false
}).directive("mypager", ['ngPaginationConfig', function(ngPaginationConfig) {
return {
link: function(scope, element, attrs) {
var visiblePageCount = angular.isDefined(attrs.visiblePageCount) ? attrs.visiblePageCount : ngPaginationConfig.visiblePageCount;
scope.firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : ngPaginationConfig.firstText;
scope.lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : ngPaginationConfig.lastText;
scope.prevText = angular.isDefined(attrs.prevText) ? attrs.prevText : ngPaginationConfig.prevText;
scope.nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : ngPaginationConfig.nextText;
scope.showFirstLastText = angular.isDefined(attrs.showFirstLastText) ? attrs.showFirstLastText : ngPaginationConfig.showFirstLastText;
scope.showIfOnePage = angular.isDefined(attrs.showIfOnePage) ? attrs.showIfOnePage : ngPaginationConfig.showIfOnePage;
scope.gotoText = angular.isDefined(attrs.gotoText) ? attrs.gotoText : ngPaginationConfig.gotoText;
scope.showGoto = angular.isDefined(attrs.showGoto) ? attrs.showGoto : ngPaginationConfig.showGoto;
scope.currentPage = 1;
scope.pageChange = function(page) {
if (page >= 1 && page <= scope.pageCount) {
scope.currentPage = page;
} else {
scope.currentPage = 1;
}
}
scope.keyupHanlder = function(e) {
var value = e.target.value;
var parsedValue = parseInt(value, 10);
if (!Number.isNaN(parsedValue)) {
if (parsedValue >= 1 && parsedValue <= scope.pageCount) {
} else if (parsedValue < 1) {
e.target.value = 1;
} else {
e.target.value = scope.pageCount;
}
if (e.keyCode === 13) {
// pressed enter
scope.currentPage = parsedValue;
}
} else {
if (e.preventDefault) {
e.preventDefault();
} else {
return false;
}
}
}
function build() {
var low,
high,
v;
scope.pagenums = [];
if (scope.pageCount === 0) {
return;
}
if (scope.currentPage > scope.pageCount) {
scope.currentPage = 1;
}
if (scope.pageCount <= visiblePageCount) {
low = 1;
high = scope.pageCount;
} else {
v = Math.ceil(visiblePageCount / 2);
low = Math.max(scope.currentPage - v, 1);
high = Math.min(low + visiblePageCount - 1, scope.pageCount);
if (scope.pageCount - high < v) {
low = high - visiblePageCount + 1;
}
}
for (; low <= high; low++) {
scope.pagenums.push(low);
}
}
scope.$watch('currentPage+pageCount', function() {
build();
scope.onPageChange();
});
},
replace: true,
restrict: "E",
scope: {
pageCount: '=',
currentPage: '=',
onPageChange: '&'
},
template: '<div class="ng-pagination"><ul ng-if="pageCount>1 || showIfOnePage"><li ng-click="pageChange(1)" ng-if="showFirstLastText">{{firstText}}</li>' +
'<li ng-click="pageChange(currentPage-1>0?currentPage-1:1)">{{prevText}}</li>' +
'<li ng-repeat="pagenum in pagenums track by pagenum" ng-click="pageChange(pagenum)" ng-class="{active:currentPage===pagenum}">{{pagenum}}</li>' +
'<li ng-click="pageChange(currentPage+1<=pageCount?currentPage+1:pageCount)">{{nextText}}</li>' +
'<li ng-click="pageChange(pageCount)" ng-if="showFirstLastText">{{lastText}}</li></ul>' +
'<lable ng-if="showGoto">{{gotoText}}<input type="text" ng-keyup="keyupHanlder($event)"></label></div>'
}
}]);
})(angular);
css中的内容：
.ng-pagination {
font-family: 'Microsoft YaHei';
font-size: 12px;
color: #337ab7;
}
.ng-pagination>ul {
display: inline-block;
margin: 0;
padding: 0;
}
.ng-pagination>ul>li {
padding: 6px 12px;
margin-right: 5px;
border: 1px solid #ddd;
display: inline-block;
cursor: pointer;
border-radius: 2px;
background: #fff;
}
.ng-pagination>ul>li:hover,
.ng-pagination>ul>li.active {
background-color: #eee;
color: #23527c;
}
.ng-pagination input {
margin-left: 2px;
width: 30px;
border-radius: 2px;
border: 1px solid #ddd;
vertical-align: 1px;
text-align: center;
padding: 6px 3px;
}