layui实现分页（前后端）

最新推荐文章于 2025-02-06 11:08:22 发布

原创最新推荐文章于 2025-02-06 11:08:22 发布 · 8k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#layui分页 #java分页

js 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了分页功能的实现，包含前端html代码、后台controller代码以及分页的公用类，并展示了页面效果，涉及layui分页和Java分页技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前端html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>后台管理</title>
    <script src="../../static/back/js/common.js"></script>
    <script src="../../static/back/js/jquery.js"></script>
    <script src="../../static/back/js/bootstrap.js"></script>
    <!--需要引入的css和js-->
    <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css">
    <script src="../../static/layui/layui.all.js"></script>
    <style>
        .layui-laypage input{
            margin:-1px 10px;
        }
        .layui-laypage .layui-laypage-skip{
            color:black;
        }
        .listTop td{
            font-weight: bold;
            font-size: 15px;
            background:	#DADFE6;
        }
        .table>tbody>tr>td{
            line-height: 23px!important;
        }
        .btn{
            width:60px!important;
        }
        .btn-search{
            background-color:#4cae4c;
            color:white;
        }
        .btn-empty{
            background-color:#1b6d85;
            color:white;
        }
        .btn-add{
            color:white;
            background-color:teal;
        }
    </style>
</head>
<body >
<!--头部-->
<div id="head" style="width:100%;"></div>
<!--左侧树-->
<div id="leftNave" style="width:200px!important">
</div>
<!-- 安全例会管理 -->
<div class="inform" id="index"style="display: block;">
    <div style="margin-top:-2px;">
        <h1 style="text-align: center;" class="conh1">关键作业项目列表</h1>
        <div class="baoDiv">
            标题：<input id="workName" type="text">
            <button class="btn btn-search" type="button" id="search" title="搜索" onclick="getPeopleList(1)">搜索</button>
            <button class="btn btn-empty" type="button" id="emptySearch" onclick="emptySearch()">清空</button>
            <button class="btn btn-add" type="button" id="renyuanadd" title="添加词条信息" onclick="showWorkItem()">添加</button>
        </div>
        <table id="workItemList" class="table-hover table-striped" style="width:100%;">
            <tr class="listTop">
                <td>序号</td>
                <td>照片</td>
                <td>标题</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            <tbody id="tableContent">

            </tbody>
        </table>
        <!--分页的底部div-->
        <div id="pagefenye" class="fenye" style="text-align:center;margin-top: 50px"></div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(function(){
        //引用头部的方法
        $("#head").load("../navigation/head.html");
        //引用左侧树的方法
        $("#leftNave").load("../left/left.html");
        getPeopleList(1);//加载分页数据
    });

    //清空搜索条件
    function emptySearch() {
        $("#videoTitle").val("");
        getPeopleList(1);
    }

    //自己封装获取数据方法
    function getPeopleList(crr){
        $('#tableContent').text("")
        var workName = $("#workName").val()
        //获取数据列表
        $.ajax({
            url: url + '/workItem/pageWorkItem',
            type:'post',
            data:{
                "curr":crr||1,
                "workName":workName,
            },
            dataType:'json',
            success:function(res){
                if(res.pageStatus){
                    count=res.pageVo.total;//总记录
                    curr=res.pageVo.currentPageNo; //当前页
                    limit=res.pageVo.pageSize; //每页几个
                    //向页面放入数据

                    //调用分页方法
                    getPageList(count,curr,limit);
                }else {
                    alert("分页加载失败");
                }
            },
            error:function(){
                alert("网络故障");
            }
        })
    }

    //自己封装分页方法
    function getPageList(count,curr,limit){
        //分页方法
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;
            //完整功能
            laypage.render({
                elem: 'pagefenye',
                count: count||0,
                theme: '#009587',
                limit : limit||3,
                limits:[5, 10, 20, 30, 40],
                curr : curr||1,
                layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip'],
                jump: function(obj,first){
                    if(!first){
                        getPeopleList (obj.curr);
                    }
                }
            });
        });
    }

</script>

2.后台controller代码：

@ResponseBody
    @PostMapping(value="/pageWorkItem")
    public PageResultVo pageWorkItem(@RequestParam(value = "curr", defaultValue = "1") int curr, @RequestParam(value = "workName") String workName, HttpSession httpSession){
        Integer pageSize = 15;
        Integer fenzuId = (Integer) httpSession.getAttribute("fenzuId");
        PageResultVo<WorkItem> pageResultVo = new PageResultVo<>();
        List<WorkItem> workItemList = iWorkItemService.pageWorkItem(curr,pageSize,workName, fenzuId);
        //设计分页数据
        pageResultVo.setPageStatus(true);
        pageResultVo.setList(workItemList);
        PageVo p = new PageVo();
        p.setCurrentPageNo(curr);
        p.setPageSize(pageSize);
        List<WorkItem> lists = iWorkItemService.pageWorkItem(1,1000000,workName, fenzuId);
        p.setTotal(lists.size());
        p.setTotalPage(lists.size() % pageSize == 0 ? lists.size()/pageSize:(lists.size()/pageSize)+1);
        pageResultVo.setPageVo(p);
        return pageResultVo;
    }

3.分页的公用类

**
 * @Description：分页返回实体
 * @Author:
 * @Date: Created in 14:18 2019-02-12
 * @Modified By:
 */
public class PageResultVo<T> {

    /**
     * 封装分页信息的vo
     */
    private PageVo pageVo;

    /**
     * 分页状态
     */
    private Boolean pageStatus;

    /**
     * 数据集合
     */
    private List<T> list;

    public PageVo getPageVo() {
        return pageVo;
    }

    public void setPageVo(PageVo pageVo) {
        this.pageVo = pageVo;
    }

    public Boolean getPageStatus() {
        return pageStatus;
    }

    public void setPageStatus(Boolean pageStatus) {
        this.pageStatus = pageStatus;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

页面效果：
在这里插入图片描述