AngularJS与BootStrap模仿百度分页的示例代码
更新时间：2018年05月23日 08:40:00 作者：稻香今天更新文章了吗
分页在很多时候都能用到，这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
模仿百度的每页显示10条数据, 实现了当前页居中的算法.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap+AngularJS分页显示 </title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" rel="external nofollow" />
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="paginationApp" ng-controller="paginationCtrl">
<table class="table table-bordered">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
<div>
<ul class="pagination pull-right">
<li>
<a href ng-click="prev()">上一页</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
<li>
<a href ng-click="next()">下一页</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript ">
var paginationApp = angular.module("paginationApp", []);
paginationApp.controller("paginationCtrl", ["$scope", "$http",
function($scope, $http) {
// 分页组件 必须变量
$scope.currentPage = 1; // 当前页 （请求数据）
$scope.pageSize = 4; // 每页记录数 （请求数据）
$scope.totalCount = 0; // 总记录数 （响应数据）
$scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
// 要在分页工具条显示所有页码
$scope.pageList = new Array();
// 加载上一页数据
$scope.prev = function(){
$scope.selectPage($scope.currentPage-1);
}
// 加载下一页数据
$scope.next = function(){
$scope.selectPage($scope.currentPage+1);
}
// 加载指定页数据
$scope.selectPage = function(page) {
// page 超出范围
if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
return ;
}
$http({
method: 'GET',
url: '6_'+page+'.json',
params: {
"page" : page , // 页码
"pageSize" : $scope.pageSize // 每页记录数
}
}).success(function(data, status, headers, config) {
// 显示表格数据
$scope.products = data.products;
// 根据总记录数 计算 总页数
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
// 更新当前显示页码
$scope.currentPage = page ;
// 显示分页工具条中页码
var begin ; // 显示第一个页码
var end ; // 显示最后一个页码
// 理论上 begin 是当前页 -5
begin = $scope.currentPage - 5 ;
if(begin < 1){ // 第一个页码 不能小于1
begin = 1 ;
}
// 显示10个页码，理论上end 是 begin + 9
end = begin + 9;
if(end > $scope.totalPages ){// 最后一个页码不能大于总页数
end = $scope.totalPages;
}
// 修正begin 的值, 理论上 begin 是 end - 9
begin = end - 9;
if(begin < 1){ // 第一个页码 不能小于1
begin = 1 ;
}
// 要在分页工具条显示所有页码
$scope.pageList = new Array();
// 将页码加入 PageList集合
for(var i=begin ; i<= end ;i++){
$scope.pageList.push(i);
}
}).error(function(data, status, headers, config) {
// 当响应以错误状态返回时调用
alert("出错，请联系管理员 ");
});
}
// 判断是否为当前页
$scope.isActivePage = function(page) {
return page === $scope.currentPage;
}
// 初始化，选中第一页
$scope.selectPage(1);
}
]);
</script>
</html>
1_1.json
{
"totalCount":100,
"products":[
{"id":"1001","name":"苹果手机","price":"5000"},
{"id":"1002","name":"三星手机","price":"6000"}
]
}
1_2.json
{
"totalCount":100,
"products":[
{"id":"1001","name":"华为手机","price":"5000"},
{"id":"1002","name":"vivo手机","price":"6000"}
]
}
实现的效果如图:
遇到的问题 : 下面的代码, 如果 把begin不小心写成了0 , 则页码上,会出现从0开始的bug
// 将页码加入 PageList集合
for(var i=begin ; i<= end ;i++){
$scope.pageList.push(i);
}
如下图所示
原因是begin代表的是页面显示的第一个页码, 如果i从0开始开始遍历, 那么pageList数组中的第一个元素就是0 ,因此在如下的angularJS的遍历页码的过程中, 就会从0开始遍历. 在页面上, 就会显示从0 开始
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Angular2使用Augury来调试Angular2程序,非常具有实用价值，需要的朋友可以参考下2017-05-05
本篇文章主要介绍了详解AngularJS脏检查机制及$timeout的妙用，“脏检查”是Angular中的核心机制之一，它是实现双向绑定、MVVM模式的重要基础，有兴趣的可以了解一下2017-06-06
AngularJS 不仅仅是一个类库，而是提供了一个完整的框架。它避免了您和多个类库交互，需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计，引领着下一代Web应用开发。也许我们5年或10年后不会使用AngularJS，但是它的设计精髓将会一直被沿用。2015-05-05
最近在使用angular来做项目，功能要求实现一是点击按钮获取验证码，二是点击登录验证表单。之前用jquery来做项目很好做，使用angular怎么实现呢？其实实现代码也很简单的，下面通过实例代码给大家介绍下，需要的朋友参考下吧2017-05-05
这篇文章主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下2014-12-12
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能，非常不错，需要的朋友可以参考下2016-08-08
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了angularjs实现猜数字大小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文主要介绍AngularJS ng-href 指令,这里对ng-href 基础资料进行详细介绍,并附代码实例,有兴趣的小伙伴可以参考下2016-08-08
详解Angular 4.x NgTemplateOutlet
这篇文章主要介绍了详解Angular 4.x NgTemplateOutlet,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论