SSM框架 layui分页

layui的table组件，实现分页。

常用的分页方式：前端每跳转至一个分页，就会发送一个分页请求，后台将该页的数据查询到，然后返回给前端，前端获取数据再显示。（分页不是说后台将全部的数据查询到，然后全部传给前端，而是前端要显示哪一页，再去向后台请求哪一页的数据，后台再返回给前端。）

web前端框架有很多，这些框架的列表分页多少会有些不同，但是还是会有相同的部分（关键部分）：分页的重要元素。

重要元素：当前页码（第几页）、每页大小（能显示多少条数据）、总数据条数。

 

本文讲的是Layui前端框架的分页。

下面介绍列表分页的基本实现，若要了解列表更多的样式和功能，官方资料地址：https://www.layui.com/doc/modules/table.html

html中表格

这里只是定义了表格，具体表格的渲染交给js完成。

<table id="billList" class="layui-table" lay-even lay-filter="test"></table>

js文件中

table的渲染中除了如下代码里的各种元素外，比如id、width，url等等，还有一些元素（参考官方地址）。

每次分页请求都会是 url: /bill/billList     请求参数是pageNumber（页码） 和 pageLimit（页大小）。

说一下：autoSort: true。 自动排序，所谓自动排序，就是前端来排序，排序规则就是：如果是数值，那就按大小排序，如果是字母，那就按a~Z 顺序来排。

autoSort: false。 就是禁止自动排序，此时要想排序，就只能发送相关参数给后台，后台按照排序来查询数据，返回排好序的数据给layui显示，以此达到排序的效果，那么就需要在js文件里 添加排序的代码，代码的作用是：获取要排序的字段名，排序方式（举个例，升序，降序，还是某种序，反正就是个名字标识，后台代码能够相应的识别就行），重新加载表格。

var table = layui.table;

    //执行渲染
    table.render({
        elem: '#billList' //指定原始表格元素选择器（推荐id选择器）
        ,id: 'list'
        ,height: 523 //容器高度
        ,width:1200
        ,cols: [[
            {title:'账单编码', field:'orderCode', fixed:'left', sort:'true'}
            ,{title:'商品名称', field:'goodsName'}
            ,{title:'供应商', field:'supplierName'}
            ,{title:'账单金额', field:'sum', sort:'true'}
            ,{title:'是否付款', field:'isPay'}
            ,{title:'创建时间', field:'optt', sort:'true'}
            ,{title:'操作人', field:'optp'}
            ,{title:'操作', fixed:'right'}
            ]] //设置表头
        ,url: '/bill/billList'
        ,method: 'post'
        ,page: {
            first: '1'
            ,limit: '4'
            ,limits: [4,8]
        }
        ,loading: true
        ,text:{
            none: '数据为空'
        }
        ,request:{
            pageName: 'pageNumber'
            ,limitName: 'pageLimit'
        }
        ,autoSort: true //点击列的表头排序符，false，前端就不会去排序了，而是table.on的方法去请求后台返回排好序的数据，然后直接显示，true时，那么前端就会自动
        //去排序，不需要请求后台了，当需要复杂排序时，可用后台，简单排序，前台足够了

    });

 

后台controller层代码如下：

PageData类是自定义的一个封装类，用于接收pageNumber 和 pageLimit参数。 返回值 是 ResultData<T> 类型的值。

@Controller
@RequestMapping("/bill")
public class BillController extends BaseController {
    @Autowired
    public BillService billService;

    @RequestMapping(value = "/billList", method = RequestMethod.POST)
    @ResponseBody
    public ResultData<List<TOrders>> findList(PageData pageDate){
        System.out.println("hello start");
        return billService.findList(pageDate);
    }
}

 

ResultData<T> 的代码如下： 为什么ResultData<T> 要如此定义呢 ？不是随便定义的，是根据layui框架需要返回的参数而定的，如果不这么定义，那么layui无法解析后台返回的数据，那也就无法正确的分页了（甚至无法分页）。

code是状态，成功还是失败。

msg是信息。

count是总记录条数。

data是要显示在列表中的数据。

private int code=0;

    private String msg = "";

    private int count;

    private T data;

pageData类的代码如下：

//请求当前第几页的列表数据
    private int pageNumber;
    //每一页显示多少条记录
    private int pageLimit;

pageDataOfMybatis类代码如下:  为什么要定义这个类呢？ 试想，我们拿到“页码”和“页大小”去数据库查询数据，写sql语句 通过limit start, size 关键语句进行查询，意思就是 从第start条开始，往后获取size条记录。那么就需要start （从第几条记录开始）和 size（获取多少条记录） ，而pageData中的pageNumber不能直接用，要转换一下，转换成 pageDataOfMybatis

private int startNum;
    private int pageSize;

 转换方法：

public static PageDataOfMybatis handle(PageData pageData){
        PageDataOfMybatis pageDataOfMybatis = new PageDataOfMybatis();
        pageDataOfMybatis.setStartNum((pageData.getPageNumber()-1)*pageData.getPageLimit());
        pageDataOfMybatis.setPageSize(pageData.getPageLimit());
        return pageDataOfMybatis;
    }

好，基本处理完了！还有最后一点点

将pageDataOfMybatis作为参数，去执行sql语句，sql语句根据自己的业务，自己写吧。

要写两个sql，一个sql查询列表要显示的数据，另一sql查询总记录数。

查询到了之后，封装成一个ResultData<T> 对象，通过controller层返回给前端，layui就一定能正确地显示出来了。

展示一下demo结果：