layui-table后端分页

最新推荐文章于 2024-08-03 13:41:47 发布

Bronna

最新推荐文章于 2024-08-03 13:41:47 发布

阅读量6.2k

点赞数 4

分类专栏： javaweb 文章标签： layui java

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

版权

javaweb 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

之前介绍了一个layui使用laypage的后端分页，渲染表格使用的最简单的拼接标签的方式来渲染表格，此次仍旧使用了laypage

一、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>
    <script type="text/javascript" src="<%=request.getContextPath()%>/layui/layui.all.js"></script>
    </head>
    <body>
        <div class=" table-second">
            <table id="ceseList" lay-filter="test"></table>
            <div id="page" style="text-align: right;"></div>
        </div>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/testlaytable.js"></script>
    </body>

</html>

二、testlaytable.js

var table;
var laypage;
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
    table = layui.table;
    laypage = layui.laypage;
});
//查询信息
function selectCase(){
    table.render({
        id:'id',
        elem: '#ceseList',
        url: "../getUsers", //数据接口
        where: {
            "checkType":1,//自定义参数
            "page":page,//当前页（必传参数，可改变参数名）
            "size":size,//每页条数（必传参数，可改变参数名）
        },
        page: false, //开启分页，true为开启，false为关闭
        //even: true, //隔行背景
        loading: true,//加载等待
        cellMinWidth: 100, //全局定义常规单元格的最小宽度
        cols: [[
                  {fixed:'left', type:'checkbox'},
                  {field:'id', title: 'ID'},
                  {field:'userName', width:'8%', title: '用户名'},
                  {field:'gender', width:'15%', title: '性别'},
                  {field:'grade', width:'10%', title: '年级'},
                  {field:'calsses', width: '20%',  title: '班级'},
                  {field:'school', width:'10%',title: '学校'},
                  {field:'email', width:'15%', title: '邮箱'},
                  {fixed:'right', field:'operation', width:'10%', title: '操作'},
            ]],
        done: doneCallback,
    });
}
//回调函数
function doneCallback(res, curr, count){
    var data=res.data;
    $("[data-field='id']").css("display","none");// 设置id列不显示
    for(var i=0;i<data.length;i++){
        $("[data-index='"+i+"']").children("[data-field='operation']").children().html("<span onclick='detail("+data[i].id+")' style='cursor:pointer;color:#0099ff;'>删除</span>");
    }
    //layui分页 
    laypage.render({ 
        elem:'page',  
        count:count,
        curr:page,
        limit:size,
        limits:[10,20,30],
        prev:"<<",
        next:">>",
        theme:"#0099ff",
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        jump:function (obj,first) {  
            if(!first){  
                page = obj.curr;  
                size = obj.limit;  
                selectCase();  
            }  
        }  
    }) 
}

三、controller

/** 
     * 
     * 使用lay-table
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping(value = "/getUsers", method = RequestMethod.GET)
    public void extApproveTypeCase(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        Map<String, Object> map = new HashMap<String, Object>();
        String page = request.getParameter("page");// 当前页
        String size = request.getParameter("size");// 条数
        String checkType= request.getParameter("checkType");// 类型
        int pages = Integer.parseInt(page);
        int rows = Integer.parseInt(size);
        int pageIndex = (pages - 1) * rows;
        map.put("page", pageIndex);// 起始条数
        map.put("size", rows);// 每页条数
        map.put("checkType", Integer.parseInt(checkType));// 类型
        // 查询总数
        int count = userService.selectUserInfoCnt(map);
        // 查询案件信息
        List<Map<String, Object>> userList = userService.selectUserInfoList(map);
        Map<String, Object> res = new HashMap<String, Object>();
        res.put("data", userList);
        res.put("count", count);
        res.put("code", 0);//返回码
        res.put("msg", "");
        writeJSON(response, res);

    }