layui-laypage后端分页

最新推荐文章于 2022-04-12 11:43:00 发布

Bronna

最新推荐文章于 2022-04-12 11:43:00 发布

阅读量1w

点赞数 1

分类专栏：前端 layui 分页文章标签： layui-后端分页

本文链接：https://blog.csdn.net/Bronna/article/details/78842893

版权

layui 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

分页

1 篇文章 0 订阅

订阅专栏

本项目为SSM项目，本示例始终使用layui后端分页时，需要返回总条数totalCount、当前页page，当前页条数limit

一、contraller代码

@RequestMapping(value = "/getInfo", method = RequestMethod.POST)
    public void inborrowInfo(HttpSession session, HttpServletRequest request, HttpServletResponse response)
            throws IOException {

        Map<String, Object> map = new HashMap<String, Object>();
        String page = request.getParameter("page");// 当前页
        String size = request.getParameter("size");// 条数

        int pages = Integer.parseInt(page);
        int rows = Integer.parseInt(size);
        int pageIndex = (pages - 1) * rows;
        map.put("page", pageIndex);// 起始条数
        map.put("size", rows);// 每页条数

        // 查询总数
        int count = infoService.selectCount(map);
        if (count > 0) {
            // 查询内部借阅信息
            List<Info> info = infoService.selectInfo(map);
            Map<String, Object> result = new HashMap<String, Object>();
            result.put("info", info);
            result.put("totalCount", count);
            result.put("page", pages);
            result.put("limit", rows);
            //返回数据
            writeJSON(response, result);
        } else {
            writeJSON(response, "fail");
        }
    }

二、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/qwjs.css"/>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/layui/css/layui.css"/>

    </head>
    <body style="padding:0 24px">
    <div class=" table-second">
        <div class="table-container">
            <table class="layui-table" id="initInfo">
                <thead id="thead">
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
    <div id="page" style="text-align:right"></div>
    <!-- 隐藏当前页和条数，初始值为1,10 -->
    <input type="hidden" id="currPage" value="1">
    <input type="hidden" id="limit" value="10">
    <script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
    <script src="<%=request.getContextPath()%>/layui/layui.all.js"></script>
    <!-- 引入js文件 -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/infoPage.js"></script>
    </body>
</html>

三、info.js脚本

$(document).ready(function(){
    //ajax请求后台数据
    studentInfo();
    toPage();
});
//请求数据
function studentInfo(){
    var realName = $("#realName").val();//借阅人
    var page=$("#currPage").val();
    var size=$("#limit").val();
    $.ajax({
        type:"post",
        url:"getInfo",//对应controller的URL
        async:false,
        dataType: 'json',
        data:{
            "page":page,
            "size":size,
            },
        success:successFunction
    });
}
//数据请求成功
function successFunction(data){
    console.log(data);
    $("#tbody").html("");
    $("#currPage").val(data.page);//重新赋值当前页
    $("#limit").val(data.limit);//重新赋值本页条数
    var page=data.page;
    var limit=data.limit;
    total=data.totalCount;
    if(data.success=="fail"){//当前无数据时
        $("#tbody").html("<br/><span style='width:200px;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
        return;
    }
    var list = data.extBorrowerInfo;
    var titles = "<tr><th><input type='checkbox'  /></th><th>姓名</th><th>年级</th><th>联系电话</th></tr>";
    $("#thead").html(titles);
    var tr="";
    for(var j=0;j < list.length;j++){
        tr+='<tr><td><input type="checkbox" class="exlCheck" id='+list[j].id+'></td>'
        tr+='<td>'+list[j].userName+'</td>';
        tr+='<td>'+list[j].grade+'</td>';
        tr+='<td>'+list[j].phoneNum+'</td></tr>';
    }
    $("#tbody").html(tr);
}
//分页
function toPage(){
    layui.use('laypage', function(){
          var laypage = layui.laypage;
           laypage.render({
                    elem: 'page' //注意，这里的 page 是 ID，不用加 # 号
                    ,//数据总数，从服务端得到
                    limits:[10,20,30,40,50],
                    prev:"<<",
                    next:">>",
                    theme:"#0099ff",
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    count:total,
                    curr:page,
                    limit:limit,
                    jump:function(data, first){
                        var page=data.curr;
                        $("#currPage").val(page);
                        var limt=data.limit;
                        $("#limit").val(limt);
                        if(!first){ //点击右下角分页时调用
                            studentInfo();
                        }
                    }
        });
    })
}