angularjs分页教程
angularjs强大的双向绑定,以及对SEO的不友好…暂时让它只能在后台管理系统方面大展身手,而管理系统,一个很重要的组件就是分页了。angularjs实现分页也不是很难。
angularjs强大的双向绑定,以及对SEO的不友好…暂时让它只能在后台管理系统方面大展身手,而管理系统,一个很重要的组件就是分页了。angularjs实现分页也不是很难。
服务端代码:
getPaginationResult : function(obj,req,res,q){// 通用查询,带分页,注意参数传递格式
var str = req.query.search, page = parseInt(req.query.page);
var limit = parseInt(req.query.limit);
if (!page) page = 1;
if (!limit) limit = 10;
var order = req.query.order;
var sq = {}, Str, A = 'problemID', B = 'asc';
if (order) { //是否有排序请求
Str = order.split('_');
A = Str[0]; B = Str[1];
sq[A] = B; //关联数组增加查询条件,更加灵活,因为A是变量
} else {
sq.date = -1; //默认排序查询条件
}
var startNum = (page - 1)*limit;
var resultList = obj.find(q).sort(sq).skip(startNum).limit(limit).find();
// 分页参数
var pageInfo = {
"totalItems" : obj.find(q).count(),
"currentPage" : page,
"limit" : limit,
"startNum" : startNum +1
};
var datasInfo = {
docs : resultList,
pageInfo : pageInfo
}
return datasInfo;
},
这里定义了一个取数据的方法,可以传递排序和搜索条件等参数,主要是通过向前端返回 pageInfo 数据来为分页做准备。
前端显示:
<div class="text-center">
<ul class="pagination pagination-centered">
<li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prevPage()">上一页</a></li>
<li ng-repeat="page in pages" ng-class="{true:'active'}[currentPage==page]"><a href="javascript:void(0);" ng-click="loadPage(page)">{{ page }}</a></li>
<li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="nextPage()">下一页</a></li>
</ul>
</div>
这里是分页的显示,
下面对分页做js操作,这里是用来angularjs:
angular.module("webApp",[])
.controller("content",function($scope,$http) {
$scope.currentPage = Number('<%=pageInfo.currentPage%>');
$scope.totalItems = Number('<%=pageInfo.totalItems%>');
$scope.limit = Number('<%=pageInfo.limit%>');
$scope.startNum = Number('<%=pageInfo.startNum%>');
$scope.totalPage = Math.ceil($scope.totalItems / $scope.limit);
$scope.pages = [];
var localUrl = "/<%=cateInfo.defaultUrl%>___<%=cateInfo._id%>";
initPagination($scope,$http,localUrl);
})
下面是 initPagination方法
function initPagination($scope,$http,localUrl){
// 定义翻页动作
$scope.loadPage = function(page){
$scope.currentPage = page;
window.location.href = localUrl + "-"+$scope.currentPage+".html";
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.totalPage) {
$scope.currentPage++;
window.location.href = localUrl + "-"+$scope.currentPage+".html";
}
};
$scope.prevPage = function () {
if ($scope.currentPage > 1) {
$scope.currentPage--;
window.location.href = localUrl + "-"+$scope.currentPage+".html";
}
};
if($scope.currentPage){
if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {
$scope.pages = [
$scope.currentPage - 1,
$scope.currentPage,
$scope.currentPage + 1
];
}
else if ($scope.currentPage == 1 && $scope.totalPage == 1) {
$scope.pages = [
$scope.currentPage
];
}
else if ($scope.currentPage == 1 && $scope.totalPage > 1) {
$scope.pages = [
$scope.currentPage,
$scope.currentPage + 1
];
} else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {
$scope.pages = [
$scope.currentPage - 1,
$scope.currentPage
];
}
}else{
console.log("获取分页信息失败")
}
}
不得不说,angularjs在某些方面确实比jquery要强大很多,在表单操作和后台数据显示等方面,非常方便,在此标记一下。更多关于 AngularJs的相关教程看这里 angularjs 相关文档
很赞哦! ( 0
)
相关文章
- [转]让你的 Node.js 应用跑得更快的 10 个技巧
- Node.js API实例——Node.js 控制台
- Node.js 入门
- nodeJs基础教程系列(3)——建立githubs项目
- nodeJs基础教程系列(1)——安装Node.js
- nodeJs基础教程系列(6)——Promise 模式的Q库
- Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器
- bootstrap 3.3 模态框垂直居中问题
- js字符串操作
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
- 视频:Windows 安装FTP服务 (基于Windows2008 IIS配置FTP站点 )
- 屌丝为什么找不到女朋友