JSP代码
<div class="zx-progcontent-bottom">
<nav aria-label="Page navigation">
<input type="hidden" ng-model="courseId">
<%--<ul class="pagination" style="margin: 0px;">--%>
<%--<li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>--%>
<%--<li ng-class="{true:'active'}[p_current==page]" ng-repeat="page in pages track by $index"><a href="javascript:void(0);" ng-click="load_page(page)">{{page}}</a></li>--%>
<%--<li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>--%>
<%--</ul>--%>
<%--<span style="vertical-align: 12px;"> 共:{{count}} 条</span>--%>
<ul class="pagination pagination-sm zx-progpage">
<li class="tiao">共{{count}}条</li>
<li ng-class="{true:'disabled'}[p_current==1]">
<a href="javascript:void(0);" aria-label="Previous" ng-click="p_index()" >
<span aria-hidden="true">首页</span>
</a>
</li>
<li ng-class="{true:'disabled'}[p_current==1]">
<a href="javascript:void(0);" aria-label="Previous" ng-click="load_page(p_current-1)">
<span aria-hidden="true">上页</span>
</a>
</li>
<li ng-class="{true:'active'}[p_current==page]" ng-repeat="page in pages track by $index">
<a href="javascript:void(0);" aria-label="Previous" ng-click="load_page(page)">
<span aria-hidden="true">{{page}}</span>
</a>
</li>
<li ng-class="{true:'disabled'}[p_current==p_all_page]">
<a href="javascript:void(0);" aria-label="Next" ng-click="load_page(p_current+1)">
<span aria-hidden="true">下页</span>
</a>
</li>
<li ng-class="{true:'disabled'}[p_current==p_all_page]">
<a href="javascript:void(0);" aria-label="Next" ng-click="p_last()">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
JS代码:
var app = angular.module('CourseKpointStudyModule', []);
app.controller("CourseListCtrl",function($scope,$http){
//配置
$scope.count = 0;
$scope.p_pernum = 0;
//变量
$scope.p_current = 1;
$scope.p_all_page =0;
$scope.pages = [];
$scope.sort="";
/**
*获取数据 注意:此方法的接收需要用@RequestBody Map<String,Object> param 来接收
*/
$scope.get = function(page,size,sort,courseId,callback){
console.log(page);
$http({method: "POST",
url:'${ctx}/front/showCourseListPage',
//参数为要跳转的页码
data:{'currentPage':page}
}).success(function(data){
if(data.success)
{
var page=data.page;
//总条数
$scope.count=page.totalResultSize;
//获取的数据
$scope.courseList=data.courseList;
$scope.p_current = page.currentPage;
//当前页
$scope.p_all_page=page.totalPageSize;
//重新计算页面
reloadPno();
//回调函数,暂时没用,可根据自己需求进行传入
callback;
} else{
alert("加载失败");
}
});
}
//初始化第一页
$scope.get($scope.p_current,$scope.p_pernum,"",0,function(){ });
//加载某一页
$scope.load_page = function(page){
var totalPage=$scope.p_all_page;
// var courseId=$scope.courseId;
var sort=$scope.sort;
console.log(sort);
if(page<1 || page>totalPage){
}else{
$scope.get(page,$scope.p_pernum,sort,0,function(){ });
}
}
//单选按钮选中
$scope.select= function(id){
alert(id);
}
//首页
$scope.p_index = function(){
$scope.load_page(1,$scope.p_pernum,$scope.sort,0);
}
//尾页
$scope.p_last = function(){
$scope.load_page($scope.p_all_page,$scope.p_pernum,$scope.sort,0);
}
//初始化页码
var reloadPno2 = function(){
$scope.pages = [];
//分页算法
for(var i = 1; i <= $scope.p_all_page; i++) {
if(i == 2 && $scope.p_current - 6 > 1) {
i = $scope.p_current - 6;
}else if(i == $scope.p_current + 6 && $scope.p_current + 6 < $scope.p_all_page) {
i = $scope.p_all_page - 1;
}else{
$scope.pages.push(i);
}
}
}
});