这篇文章将为大家详细讲解有关使用AngularJS和BootStrap怎么模仿百度分页，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，十多年企业及个人网站建设经验 ,为成都上千余家客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，高端网站设计，同时也为不同行业的客户提供成都网站建设、做网站的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联公司。
BootStrap+AngularJS分页显示
| 序号 |
商品编号 |
名称 |
价格 |
{{$index+1}} |
{{product.id}} |
{{product.name}} |
{{product.price}} |
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);
}
]);
