layui的数据表格+springmvc实现数据显示，分页功能

分手后的思念是犯贱 2022-05-24 03:35 268阅读 0赞

在做分享圈项目后台时，用的是layui提供的后端页面框架，页面挺好看的。

下载layui包：组装我们想要的页面，[layui在线示例        ][layui_ _ _ _]

github地址：[下载示例包][Link 1]

看官方文档api：[数据表格][Link 2]   实现数据显示，分页功能。

![70][]

1.前端页面：

要导入layui的layui.css和layui.js

html:

js操作：

springmvc后台代码：

controller层：

/**
     * layui-content后台代码
     * @return
     */
    @RequestMapping("/backContent")
    @ResponseBody
    public ResultMap<List<Content>> backContent(Page page,@RequestParam("limit") int limit){
        System.out.println("backContent========================"+limit);
        page.setRows(limit);
        System.out.println("page:"+page.toString());
        List<Content>contentList=contentService.selectPageList(page);
        int totals=contentService.selectPageCount(page);
        page.setTotalRecord(totals);
        return new ResultMap<List<Content>>("",contentList,0,totals);
    }

因为layui的数据表格需要的格式json不只是一个数据数组，而是

code: 0,  
msg: "",  
count: 数据总记录数,  
data: \[\]

需要参数code（要为0，不然数据表格数据显示不出）,msg（返回的消息），data(表格显示的数据)，totals(查询到数据的总记录数)，

所以用ResultMap返回数据

/**
     * 
     * layui数据表格返回数据处理类
     * Created by ASUS on 2018/5/19
     *
     * @Authod Grey Wolf
     */
    public class ResultMap<T> {
        private String msg;
        private  T data;
        private  int code;
        private  int count;
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public T getData() {
            return data;
        }
    
        public void setData(T data) {
            this.data = data;
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public int getCount() {
            return count;
        }
    
        public void setCount(int count) {
            this.count = count;
        }
    
        public ResultMap(String msg, T data, int code, int count) {
            this.msg = msg;
            this.data = data;
            this.code = code;
            this.count = count;
        }
    
        public ResultMap() {
        }
    }

### Page类是我用来封装分页的数据的，比如layui的当前页数，点击下一页的值。不用类封装，也可以用springmvc的@RequestBody("page")int page 获取layui传到后台的当前页数。 ###

/**
     * 处理分页
     * Created by ASUS on 2018/5/7
     *
     * @Authod Grey Wolf
     */
    
    
    
    public class Page implements Serializable {
    
    
        //当前页
        private Integer page=1;
        //页大小
        private Integer rows=5;
        // 总记录 数
        private Integer totalRecord;
        //总页数
        private Integer totalPage;
        //关键字类型
        private String keyType;
        //查询关键字
        private String keyWord;
        //开始记录位置
        private Integer start;
        //用户id
        private String userid;
        //其他用户id
        private String otherid;
    
        public String getKeyType() {
            return keyType;
        }
    
        public void setKeyType(String keyType) {
            this.keyType = keyType;
        }
    
        public String getOtherid() {
            return otherid;
        }
    
        public void setOtherid(String otherid) {
            this.otherid = otherid;
        }
    
        public String getUserid() {
            return userid;
        }
    
        public void setUserid(String userid) {
            this.userid = userid;
        }
    
        public Integer getPage() {
            return page;
        }
    
        public void setPage(Integer page) {
            this.page = page;
        }
    
        public Integer getRows() {
            return rows;
        }
    
        public void setRows(Integer rows) {
            this.rows = rows;
        }
    
        public Integer getTotalRecord() {
            return totalRecord;
        }
    
        public void setTotalRecord(Integer totalRecord) {
            this.totalRecord = totalRecord;
        }
    
        public Integer getTotalPage() {
            totalPage=(totalRecord-1)/rows+1;
            return totalPage;
        }
    
        public void setTotalPage(Integer totalPage) {
    
            this.totalPage = totalPage;
        }
    
        public String getKeyWord() {
            return keyWord;
        }
    
        public void setKeyWord(String keyWord) {
            this.keyWord = keyWord;
        }
    
        public Integer getStart() {
            start=(page-1)*rows;
            return start;
        }
    
        public void setStart(Integer start) {
    
            this.start = start;
        }
    
       
        public Page() {
        }
    
        public Page(Integer page, Integer rows, Integer totalRecord, Integer totalPage, String keyType, String keyWord, Integer start, String userid, String otherid) {
            this.page = page;
            this.rows = rows;
            this.totalRecord = totalRecord;
            this.totalPage = totalPage;
            this.keyType = keyType;
            this.keyWord = keyWord;
            this.start = start;
            this.userid = userid;
            this.otherid = otherid;
        }
    
        @Override
        public String toString() {
            return "Page{" +
                    "page=" + page +
                    ", rows=" + rows +
                    ", totalRecord=" + totalRecord +
                    ", totalPage=" + totalPage +
                    ", keyType='" + keyType + '\'' +
                    ", keyWord='" + keyWord + '\'' +
                    ", start=" + start +
                    ", userid='" + userid + '\'' +
                    ", otherid='" + otherid + '\'' +
                    '}';
        }
    }

service层：

//分页数据
        List<Content>selectPageList(Page page);
    //分页数据总数
        Integer selectPageCount(Page page);

serviceImpl层：

@Override
        public List<Content> selectPageList(Page  page) {
            List<Content>list=contentMapper.selectPageList(page);
            return list;
        }
    
        @Override
        public Integer selectPageCount(Page page) {
            return contentMapper.selectPageCount(page);
        }

mapper层：

//通过关键字分页查询数据列表
        public List<Content> selectPageList(Page page);
    
        //通过关键字分页查询，返回总记录数
        public Integer selectPageCount(Page page);

mapper.xml:

根据所传来的参数，mapper执行相应的sql语句，返回结果集

<select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
      select
      <include refid="Base_Column_List" />
      from content
      <where>
        <if test="userid!=null and userid !=''">AND  userid = #{userid}</if>
        <if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT  userid FROM  content where userid = #{otherid} )</if>
        <if test="keyWord!='' and keyType=='userid' ">
           AND userid like '%' #{keyWord} '%'
        </if>
        <if test="keyWord!='' and keyType=='content' ">
           AND content like '%' #{keyWord} '%'
        </if>
    
      </where>
      order by id DESC
      limit #{start},#{rows}
    </select>
    
    
    <select id="selectPageCount" parameterType="net.stxy.one.model.Page"  resultType="java.lang.Integer">
      select count(1) from content
        <where>
          <if test="userid!=null and userid !=''">AND  userid = #{userid}</if>
          <if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT  userid FROM  content where userid = #{otherid} )</if>
          <if test="keyWord!='' and keyType=='userid' ">
            AND userid like '%' #{keyWord} '%'
          </if>
          <if test="keyWord!='' and keyType=='content' ">
             AND content like '%' #{keyWord} '%'
          </if>
        </where>
    </select>

### 总结下思路：前端点击分享信息页面，layui通过js代码把获取数据的请求url发到springmvc，springmvc根据传来的参数，调用相应service层接口，操作数据访问dao层，在mapper.xml执行相应的sql语句获取到的结果集用list<>封装起来，之后根据layui数据表格初始化需要的数据格式要求用ResultMap进行封装数据，把数据传回前端页面。前端页面根据传回来的数据集合进行页面渲染。点击分页按钮的流程是一样的，就是传回后台的page改变了而已。 ###

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70][]

[layui_ _ _ _]: http://www.layui.com/demo/
[Link 1]: https://github.com/sentsin/layui/
[Link 2]: http://www.layui.com/demo/table/resetPage.html
[70]: /images/20220524/7fdaf79c83aa4a4a9117ffe646dc541e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70]: /images/20220524/a09963174e724ca4a51fcbe9ed7c968b.png