# Mybatis+Layui分页实现

最新推荐文章于 2024-08-04 14:44:44 发布

全栈程序员

最新推荐文章于 2024-08-04 14:44:44 发布

阅读量891

点赞数

分类专栏：前端开发文章标签： mybatis layui分页

本文链接：https://blog.csdn.net/qq_37248504/article/details/101320663

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

分页结果类

package com.li.thesismanagement.utils;
public class ResultVo {

    private int code;
    private String msg;
    private int count = 0;
    private Object data;

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

实现的方法

 @Override
    public List<Teacher> listAll(int currPage,int pageSize) {
        List<Teacher> teachers = teacherMapper.selectAll();
        int count=teacherMapper.selectCount();
        int first = (currPage - 1) * pageSize;
        int last = currPage * pageSize;
        if(last>count){
            last=count;
            if(count<pageSize) {
                List<Teacher> teachers1 = teachers.subList(first, count);
                return teachers1;
            }else {
                List<Teacher> teachers1 = teachers.subList(first, last);
                return teachers1;
            }
        }else {
            if(count<pageSize) {
                List<Teacher> teachers1 = teachers.subList(first, count);
                return teachers1;
            }else {
                List<Teacher> teachers1 = teachers.subList(first, last);
                return teachers1;
            }
        }
    }

页面展示

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>layui</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="/../back/layui/css/layui.css" media="all">
   </head>
   <body>
   
   <table class="layui-hide" id="test" lay-filter="test"></table>
   
   <script type="text/html" id="toolbarDemo">
       <div class="layui-btn-container">
           <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
           <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
           <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
       </div>
   </script>
   <script type="text/html" id="barDemo">
       <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
       <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
   </script>
   
   
   <script src="/../back/layui/layui.js" charset="utf-8"></script>
   
   <script>
       layui.use('table', function () {
           var table = layui.table;
   
           table.render({
               elem: '#test'
               , url: '/teacher/list'
               , toolbar: '#toolbarDemo'
               , title: '用户数据表'
               , totalRow: true
               , cols: [[
                   {type: 'checkbox', fixed: 'left'}
                   , {field: 'tId', title: 'ID', width: 250, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                   , {field: 'name', title: '教师名', width: 120}
                   , {field: 'name', title: '性别', width: 120}
                   , {field: 'tno', title: '编号', width: 110}
                   , {field: 'password', title: '密码', width: 250}
                   , {field: 'pic', title: '头像', width: 200}
                   , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
   
               ]]
               , page: true,
               limits: [15, 30, 50, 100, 200],
               limit: 10,  //默认采用25
               loading: true,
               autoSort: false
           });
   
           //工具栏事件
           table.on('toolbar(test)', function (obj) {
               var checkStatus = table.checkStatus(obj.config.id);
               switch (obj.event) {
                   case 'getCheckData':
                       var data = checkStatus.data;
                       layer.alert(JSON.stringify(data));
                       break;
                   case 'getCheckLength':
                       var data = checkStatus.data;
                       layer.msg('选中了：' + data.length + ' 个');
                       break;
                   case 'isAll':
                       layer.msg(checkStatus.isAll ? '全选' : '未全选')
                       break;
               }
               ;
           });
       });
   </script>
   
   </body>
   </html>

码云地址

https://gitee.com/Marlon_Brando/book.git

全栈程序员

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录