前端部分
- 引入 jss ,css
<link rel="stylesheet" type="text/css" href="css/jquery.page.css"> <script type="text/javascript" src="js/jquery.page.js"></script>总条数 修改js
-
dataHtml+='<span style="display:inline-block;margin-right: 16px;line-height:30px;" id="sumCount"></span>'jquery.page.js js内容
-
(function($){var defaults={totalPages:9,liNums:9,activeClass:'active',firstPage:'首页',lastPage:'末页',prv:'«',next:'»',hasFirstPage:true,hasLastPage:true,hasPrv:true,hasNext:true,callBack:function(page){}};$.fn.Page=function(options){var opts=$.extend(defaults,options);return this.each(function(){var obj=$(this);var l=opts.totalPages;var n=opts.liNums;var active=opts.activeClass;var str='';var str1='<li><a href="javascript:" class="'+active+'">1</a></li>';if(l>1&&l<n+1){for(i=2;i<l+1;i++){str+='<li><a href="javascript:">'+i+'</a></li>';}}else if(l>n){for(i=2;i<n+1;i++){str+='<li><a href="javascript:">'+i+'</a></li>';}} var dataHtml='';if(opts.hasNext){dataHtml+='<span style="display:inline-block;margin-right: 16px;line-height:30px;" id="sumCount"></span><div class="next fr">'+opts.next+'</div>';} if(opts.hasLastPage){dataHtml+='<div class="last fr">'+opts.lastPage+'</div>';} dataHtml+='<ul class="pagingUl">'+str1+str+'</ul>';if(opts.hasFirstPage){dataHtml+='<div class="first fr">'+opts.firstPage+'</div>';} if(opts.hasPrv){dataHtml+='<div class="prv fr">'+opts.prv+'</div>';} obj.html(dataHtml).off("click");obj.on('click','.next',function(){var pageshow=parseInt($('.'+active).html());var nums,flag;var a=n%2;if(a==0){nums=n;flag=true;}else if(a==1){nums=(n+1);flag=false;} if(pageshow>=l){return;}else if(pageshow>0&&pageshow<=nums/2){$('.'+active).removeClass(active).parent().next().find('a').addClass(active);}else if((pageshow>l-nums/2&&pageshow<l&&flag==false)||(pageshow>l-nums/2-1&&pageshow<l&&flag==true)){$('.'+active).removeClass(active).parent().next().find('a').addClass(active);}else{$('.'+active).removeClass(active).parent().next().find('a').addClass(active);fpageShow(pageshow+1);} opts.callBack(pageshow+1);});obj.on('click','.prv',function(){var pageshow=parseInt($('.'+active).html());var nums=odevity(n);if(pageshow<=1){return;}else if((pageshow>1&&pageshow<=nums/2)||(pageshow>l-nums/2&&pageshow<l+1)){$('.'+active).removeClass(active).parent().prev().find('a').addClass(active);}else{$('.'+active).removeClass(active).parent().prev().find('a').addClass(active);fpageShow(pageshow-1);} opts.callBack(pageshow-1);});obj.on('click','.first',function(){var activepage=parseInt($('.'+active).html());if(activepage<=1){return} opts.callBack(1);fpagePrv(0);});obj.on('click','.last',function(){var activepage=parseInt($('.'+active).html());if(activepage>=l){return;} opts.callBack(l);if(l>n){fpageNext(n-1);}else{fpageNext(l-1);}});obj.on('click','li',function(){var $this=$(this);var pageshow=parseInt($this.find('a').html());var nums=odevity(n);opts.callBack(pageshow);if(l>n){if(pageshow>l-nums/2&&pageshow<l+1){fpageNext((n-1)-(l-pageshow));}else if(pageshow>0&&pageshow<nums/2){fpagePrv(pageshow-1);}else{fpageShow(pageshow);}}else{$('.'+active).removeClass(active);$this.find('a').addClass(active);}});function fpageShow(activePage){var nums=odevity(n);var pageStart=activePage-(nums/2-1);var str1='';for(i=0;i<n;i++){str1+='<li><a href="javascript:" class="">'+(pageStart+i)+'</a></li>'} obj.find('ul').html(str1);obj.find('ul li').eq(nums/2-1).find('a').addClass(active);} function fpagePrv(index){var str1='';if(l>n-1){for(i=0;i<n;i++){str1+='<li><a href="javascript:" class="">'+(i+1)+'</a></li>'}}else{for(i=0;i<l;i++){str1+='<li><a href="javascript:" class="">'+(i+1)+'</a></li>'}} obj.find('ul').html(str1);obj.find('ul li').eq(index).find('a').addClass(active);} function fpageNext(index){var str1='';if(l>n-1){for(i=l-(n-1);i<l+1;i++){str1+='<li><a href="javascript:" class="">'+i+'</a></li>'} obj.find('ul').html(str1);obj.find('ul li').eq(index).find('a').addClass(active);}else{for(i=0;i<l;i++){str1+='<li><a href="javascript:" class="">'+(i+1)+'</a></li>'} obj.find('ul').html(str1);obj.find('ul li').eq(index).find('a').addClass(active);}} function odevity(n){var a=n%2;if(a==0){return n;}else if(a==1){return(n+1);}}});}})(jQuery);jquery.page.css css 内容
-
@charset "utf-8"; /*样式参考*/ a { text-decoration: none; } #page { height: 50px; display: table; margin: 0 auto; } .page { text-align: center; } .fl { float: left; } .fr { float: right; } .pagingUl { float: right; padding: 0; margin: 0; list-style: none; height: 30px; } .pagingUl li { float: left; width: 30px; height: 30px; background: #fff; text-align: center; margin-right: 5px; border-radius: 5px } .pagingUl li a { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 28px; color: #666; font-size: 12px; border-radius: 5px } .prv, .next { width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; background: #fff; padding: 0 5px; border-radius: 5px; } .prv { margin-right: 10px; } .first, .last { width: 36px; height: 30px; font-size: 12px; text-align: center; line-height: 30px; /*border: 1px solid #ddd;*/ cursor: pointer; background: #fff; padding: 0 5px; border-radius: 5px; margin-right: 10px; } .prv:hover, .next:hover, .first:hover, .last:hover, .pagingUl li a:hover, .activP { background-color: #1ab394!important; color: #fff!important; }
.设置布局
<div id="page"></div>.Ajax请求
function page() {
var count=$('#count').val(); //数据的总数量
var pageSize=$('#pageSize').val(); //每页显示的条数
var pageCount=Math.ceil(count/pageSize);
$("#page").Page({
totalPages:pageCount,//分页总数
liNums: 7,//分页的数字按钮数(建议取奇数)
activeClass: 'activP', //active 类样式定义
callBack : function(page){
$('#pagi').val(page);
show();
}
});
$('#sumCount').text("共"+count+"条");
}
上面的方法通用的分页方法(配合这个通用的列表显示方法)
function show(){
var deviceVersion=$('#deviceVersion option:selected').val();
var state=$('#state option:selected').val();
var period=$('#period option:selected').val();
var deployAddress=$('#deployAddress').val();
var Belonger=$('#Belonger').val();
var createTime1=$('#createTime1').val();
var createTime2=$('#createTime2').val();
var periodTime1=$('#periodTime1').val();
var updateTime1=$('#updateTime1').val();
var updateTime2=$('#updateTime2').val();
var pagi=$('#pagi').val();
var pageSize=$('#pageSize').val();
$.ajax({
url:'quipment/selectList',
type:'get',
async:false, //同步加载
data:{maViseion:deviceVersion,
state:state,
period:period,
deployAddress:deployAddress,
Belonger:Belonger,
createTime1:createTime1,
createTime2:createTime2,
periodTime1:periodTime1,
updateTime1:updateTime1,
updateTime2:updateTime2,
pagi:pagi,
pageSize:pageSize,
},
dataType:'json',
success:function(res){
var datas=res.obj;
$('#count').val(res.totleNum);//总条数
var str="";
for(var i=0;i<datas.length;i++){
var state = "";
if(datas[i].state){
if(datas[i].state==1){
state = "全新入库";
}else if(datas[i].state==3){
state = "损坏报修";
}else if(datas[i].state==4){
state = "退货回收";
}else if(datas[i].state==6){
state = "外借已归还";
}else if(datas[i].state==7){
state = "正常";
}else {
state = "";
}
}
str+='<tr id="'+datas[i].ttId+'" class="idt">' +
' <td>'+[i+1]+'</td>' +
' <td>'+datas[i].deviceId+'</td>' +
' <td>'+datas[i].maViseion+'</td>' +
' <td>'+Format(datas[i].createTime,"yyyy-MM-dd")+'</td>' +
' <td>'+datas[i].period+'</td>' +
' <td>'+Format(datas[i].periodTime,"yyyy-MM-dd")+'</td>' +
' <td>'+datas[i].deployAddress+'</td>' +
' <td>'+state+'</td>' +
' <td class="parent" id="'+datas[i].maId+'"> '+
' <a href="javascript:;" class="choose open_add_page1" id="'+datas[i].maId+'">修改</a>' +
// ' <a href="javascript:;" class="del" id="'+datas[i].maId+'">删除</a>' +
'</td> ' +
' </tr>'
}
$('.list').html(str)
}
})
}调用方法
show();
page();注意:在要默认给分页参数，一般有两种获得默认参数方法，定义全局变量或者设置在隐藏的控件中设置
后台部分：
引入jar包
<!--分页-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>代码部分
PageHelper.startPage(pagi, pageSize); //PageHelper的方法配置分页参数
List<Borrow> list=borrowService.selectListBorrow(borrow);//这里正常调用分页
PageInfo<Borrow> pageInfo=new PageInfo<>(list);
return jsonOut.selectOut(pageInfo.getList(),(int)pageInfo.getTotal());
5132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
