Ajax固定分页模板+pagehelper

前端部分

• 引入 jss ,css

  <link rel="stylesheet" type="text/css" href="css/jquery.page.css">
  
  <script type="text/javascript" src="js/jquery.page.js"></script>

.设置布局

<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();
        }
    });
}


上面的方法通用的分页方法(配合这个通用的列表显示方法)
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>

代码部分

 int count=borrowService.selectListBorrowCount(borrow);//获得总页数
 PageHelper.startPage(pagi, pageSize);                 //PageHelper的方法配置分页参数
 List<Borrow> list=borrowService.selectListBorrow(borrow);//这里正常调用分页
 PageInfo<Borrow> pageInfo=new PageInfo<>(list);