angular.js+bootstrap 自己做分页插件（一） 分页条的逻辑实现
发布时间：2020-12-17 08:17:27 所属栏目：安全 来源：网络整理
导读：效果如下 动态的改变每页显示条数，改变页面数 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /script type="text/javascript" src="js/angular.min.js"/scriptscript typ
|
效果如下 动态的改变每页显示条数，改变页面数 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body ng-app="myApp" ng-controller="ctr1" >
<p>每页显示<input type="text" ng-model="pagenum" ng-blur="getPages(1)"/>条数 </p>
<ul class="pagination">
<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>
<script>
var app = angular.module('myApp',[]);
function getPages(currentpage,firstPage,endPage,pageNum){
console.log("f:"+firstPage);
console.log("num:"+pageNum);
var pages = [];
var size = parseInt(firstPage)+parseInt(pageNum);
console.log(size);
for(var i=firstPage;i<size;i++){
pages.push(i);
}
console.log("pages:"+pages)
return pages;
}
app.controller('ctr1',function($scope){
$scope.totalPages = 24;
$scope.pagenum = 5
$scope.getPages = function(page){
$scope.pages = [];
var firspage=0,endpage=0;
if(page<$scope.pagenum){
firspage = 1;
endpage = $scope.pagenum;
}else{
var index = $scope.totalPages-page;
if(index<($scope.pagenum-1)){
firspage = $scope.totalPages-($scope.pagenum-1);
endpage = $scope.totalPages;
}else{
firspage = page-(Math.ceil($scope.pagenum/2));
endpage = page+(Math.ceil($scope.pagenum/2));
}
}
$scope.pages = getPages(0,firspage,endpage,$scope.pagenum);
$scope.page = page;
console.log($scope.pages);
}
$scope.getPages(1);
});
</script>
</body>
</html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |