layui实现分页查询

layui实现分页查询

一、导入分页插件

       <!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

二、service层

        /**
     * 分页查询
     */
   List<HouseAdmin> findAllAdminByPage(int pageNum,int pageSize);

三、mapper

    /**
     * 查询所有管理员
     */
    public List<HouseAdmin> selectHouseAdminList();

三、mapper.xml

     <resultMap type="HouseAdmin" id="HouseAdminResult">
        <result property="admId"    column="adm_id"    />
        <result property="admUser"    column="adm_user"    />
        <result property="admPsw"    column="adm_psw"    />
        <result property="admName"    column="adm_name"    />
        <result property="admSex"    column="adm_sex"    />
    </resultMap>

    <sql id="selectHouseAdminVo">
        select adm_id, adm_user, adm_psw, adm_name, adm_sex from house_admin
    </sql>

    <select id="selectHouseAdminList" parameterType="HouseAdmin" resultMap="HouseAdminResult">
        <include refid="selectHouseAdminVo"/>
        <where>  
            <if test="admUser != null  and admUser != ''"> and adm_user = #{admUser}</if>
            <if test="admPsw != null  and admPsw != ''"> and adm_psw = #{admPsw}</if>
            <if test="admName != null  and admName != ''"> and adm_name like concat('%', #{admName}, '%')</if>
            <if test="admSex != null  and admSex != ''"> and adm_sex = #{admSex}</if>
        </where>
    </select>

四、impl

       @Override
    public List<HouseAdmin> findAllAdminByPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<HouseAdmin> lists = houseAdminDao.selectHouseAdminList();
        return lists;
    }

五、controller

    /**
     * 分页查询
     */
    @ApiOperation(value = "分页查询")
    @PostMapping("/page")
    public ResultTable<HouseAdmin> pageAmin(@PathParam("pageNum")Integer pageNum,@PathParam("pageSize")Integer pageSize){
        try {
            // 获取用户列表
            List<HouseAdmin> queryResult = houseAdminService.findAllAdminByPage(pageNum, pageSize);
            int count = houseAdminMapper.selectCount();
            return new ResultTable(0,"查询成功",count,queryResult);
        } catch (Exception e) {
            e.printStackTrace();
            log.error("用户列表查询异常！", e);
            return null;
        }
    }

写完接口接下来看layui

– 页面布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
            </div>
        </script>

		
        <table class="layui-hide" id="admin" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../util/public.js"></script>

这里我携带了登录时保存的token，没定义可以不携带

table.render({
            elem: '#admin'//指定表格的id
			,height: 'full-50'
            ,url: requestUrl+'admin/page'
            ,toolbar: '#toolbarDemo'
			,method:'post'
			,contentType:"application/json"
			,async: true
			,headers: {//携带token
				token : localStorage.token
			}
			,request: {
			//这里设置的pageNum与pageSize每次请求时都会传给后端，从而实现layui的自定义分页
						pageName: 'pageNum' //页码的参数名称，默认：page
						,limitName: 'pageSize', //每页数据量的参数名，默认：limit
			         }
            ,defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
               {field:'admId', width:100, title: 'ID', sort: true}
                ,{field:'admUser', width:100, title: '账号'}
                ,{field:'admPsw', width:100, title: '密码'}
                ,{field:'admName', width:100, title: '用户名'}
                ,{field:'admSex', width:100, title: '性别', align: "center"}
                ,{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5,10, 15, 20],
            limit: 10,
            page: true,
            skin: 'line'
        });

ok,打完收工
ps:本人也是个小白，和大家分享一下自己的一些经验，对代码的理解可能不是很透彻，这也只是给同样是小白的大家提供一下使用方法的参考而已。欢迎大佬指点错误。