angular.js+bootstrap 自己做分页插件（三）带数据加载，数据筛

如图：

之前的版本，分页存在一些bug,修改每页分页条数小于5的时候，页面条会有问题，现在已经修复，发布最新的完整的成果。

html代码：

<p>每页显示<input type="text" ng-model="pagenum" />条数     <span style="float: right;">搜索：<input type="text" ng-model="txt" ng-blur=""></span></p>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>ID</th>
					<th>NAME</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="v in data">
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
				</tr>
			</tbody>
		</table>
		<ul class="pagination pull-right">
			<li ng-class="{disabled:1==page}"><a href="#" ng-click="getPages(page-1<1?1:page-1)">?</a></li>
			<li ng-repeat="item in pages" ng-class="{active:item==page}"><a href="#" ng-click="getPages(item)" >{{item}}</a></li>
			<li ng-class="{disabled:totalPages==page}"><a href="#" ng-click="getPages(page+1>totalPages?totalPages:page+1)">?</a></li>
		</ul>

js代码：

var data=[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'},{id:4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'},{id:7,name:'name7'},{id:8,name:'name8'},{id:9,name:'name9'},{id:10,name:'name10'},{id:11,name:'name11'},{id:12,name:'name12'},{id:13,name:'name13'},{id:14,name:'name14'},{id:15,name:'name15'},{id:16,name:'name16'},{id:17,name:'name17'},{id:18,name:'name18'},{id:19,name:'name19'},{id:20,name:'name20'},{id:21,name:'name21'},{id:22,name:'name22'},{id:23,name:'name23'},{id:24,name:'name24'},{id:25,name:'name25'},{id:26,name:'name26'},{id:27,name:'name27'},{id:28,name:'name28'},{id:29,name:'name29'},{id:30,name:'name30'},{id:31,name:'name31'},{id:32,name:'name32'}
				];

function getPages(currentpage,firstPage,endPage,pageNum){
				var pages = [];
				console.log("f:"+firstPage);console.log("e:"+endPage);
				for(var i=firstPage;i<=endPage;i++){
					pages.push(i);
				}
				console.log(pages);
				return pages;
			}
			
			app.controller('ctr1',function($scope,$filter){
				$scope.pagenum = 5
				var showData = data
				$scope.$watch('txt',function(n,o){
					if(n==''){
						showData = data;
					}else{
						showData = $filter('filter')(data,n);
					}
					$scope.getPages(1);
				});
				
				$scope.$watch('pagenum',o){
					$scope.getPages(1);
				});
				
				$scope.getPages = function(page){
					var size = showData.length;
					$scope.totalPages = size%$scope.pagenum==0?(size/$scope.pagenum):Math.ceil(size/$scope.pagenum);
					var firspage=0,endpage=0;
					if(page<5){
						console.log('第一项');
						firspage = 1;
						endpage = 5>$scope.totalPages?$scope.totalPages:5;
					}else{
						var index = $scope.totalPages-page;
						if(index<(4)){
							console.log('第二项');
							firspage = $scope.totalPages-4;
							endpage = $scope.totalPages;
						}else{
							console.log('第三项');
							firspage = page-2;
							endpage = page+2;
						}
					}
					$scope.pages = getPages(0,firspage,endpage,5);
					$scope.page = page;
					var indexS = ($scope.page-1)*$scope.pagenum;
					var indexE = parseInt(indexS)+parseInt($scope.pagenum);
					var indexEnd = indexE>showData.length?showData.length:indexE;
					var tableD = []
					for(var s=indexS;s<indexEnd;s++){
						tableD.push(showData[s]);
					}
					$scope.data = tableD;
				}
				$scope.getPages(1);
			});

项目源码下载地址：https://download.csdn.net/download/xq30397022/10367892 点击打开链接