前端分页使用js css配合后端Pagehelper做分页功能

后台通过pagehelper插件做的分页返回分页的固定格式

分页js

//设置分页
        function setPage(data){
            $("#pageNum").val(data.pageNum)//当前页面
            $("#total").text("总共"+data.total+"条记录");//总共记录数
            $("#pages").text(data.pages)//总过多少页
            $("#nextPage").val(data.nextPage)//下一页
            $("#prePage").val(data.prePage)//上一页
            //判断如果上下一页是0 那就是首页或尾页 不给点击
            data.nextPage==0?$("#nextPage").attr("disabled",true):$("#nextPage").attr("disabled",false);
            data.prePage==0?$("#prePage").attr("disabled",true):$("#prePage").attr("disabled",false);
        }
        //分页中的按钮的点击事件'
        $(".pagination button").click(function (e) {
            var page = $(this).val();
            getTbInfo(page); //查询数据
        })
        // 分页输入框的改变事件
        $("#pageNum").change(function (e) {
            $(".pagination button:nth-child(1)").val($(this).val())
            getTbInfo($(this).val());
        })
        //切换每页条数的改变事件
        $("#size").change(function (e) {
            getTbInfo($("#pageNum").val());
        })

分页css

.pagination{
    display: flow-root;
    margin-top: 20px;
}
.pagination select{
    width: 50px;
}
.pagination button{
    height: 25px;
    border: none;
    outline: none;
    background-color: #e9eded;
}
.pagination button:first-child{
    background-color: #15AACA;
    color: #FFFFFF;
    border: 0;
    border-radius: 5px;
    outline: none;
}
/* .pagination button:focus{
    background-color: #D3D3D3;
} */
.pagination input{
    width: 30px;
    height: 20px;
    outline: none;
    text-align: center;
}
.pagination label{
    font-size: 14px;
}

分页的布局

<!-- 页面引入js 和css -->
<link rel="stylesheet" href="css/pagation.css"/>
<script src="js/pagation.js"></script>

<!-- 分页 -->
                <div class="pagination">
                    <div style="float:left;">
                        <label>显示
                            <select id="size">
                                <option>10</option>
                                <option>15</option>
                                <option>20</option>
                            </select>
                            条 </label>
                    </div>
                    <div style="float: right;">
                        <button>GO</button>
                        <button id="prePage"><</button>
                        <input type="text" id="pageNum">
                        <button id="nextPage">></button>/<label id="pages"></label> |
                        <label id="total"></label>
                    </div>
                </div>

进入页面会展示数据，数据通过ajax查询，查询写成公共方法。

/* 查询展示数据 */
        function getTbInfo(page){
            var size = $("#size").val()//每页条数
            $.ajax({
                url:"地址",
                type:"post",
                dataType;'json',
                data:{"page",page,"size",size},
                success:function(data){
                    var data = data.data
                    var list = data.list
                    //页面方式数据操作
    
                    setPage(data);//调用分页js中的方法：给上一页下一页等按钮设置点击事件
                }
            })
        } 

//进入页面默认查询
$(function () {
            getTbInfo("");//page如果填入未空，后天设置了默认值为1，
        })

//每次查询数据只需要
getTbInfo($("#pageNum").val())； 获取输入框里面的值就可以了

以上全部固定，唯一要写的就是succes中自己给页面布局查回数据.

以下是展示