这篇文章主要介绍了angularjs与bootstrap模仿百度分页的示例代码，分页在很多时候都能用到，现在分享给大家，也给大家做个参考。
模仿百度的每页显示10条数据, 实现了当前页居中的算法.
nbsp;html>BootStrap+AngularJS分页显示
登录后复制
序号商品编号
名称
价格
{{$index+1}} {{product.id}} {{product.name}} {{product.price}}
上一页 {{page}} 下一页 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 $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 $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); } ]);
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如下图所示
原因是begin代表的是页面显示的第一个页码, 如果i从0开始开始遍历, 那么pageList数组中的第一个元素就是0 ,因此在如下的angularJS的遍历页码的过程中, 就会从0开始遍历. 在页面上, 就会显示从0 开始
登录后复制 {{page}}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
基于js原生和ajax的get和post方法以及jsonp的原生写法的介绍
基于js原生和ajax的get和post方法以及jsonp的原生写法的介绍
以上就是AngularJS与BootStrap模仿百度分页的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747204.html
