layui分页显示

这里使用layui的分页插件laypage (点击参考官方文档)
三个步骤
1.在相应位置写入分页div

<div id="test1" class="layui-elem-field layui-field-title" style="margin: auto;text-align: center;"></div>

2.写前端请求

function findHistoryMessage2(id,page,limit) {
    var param = {"id":id,"page":page,"limit":limit}
    $.ajax({
      data:param,
      url: "/message/findHistoryMessage.do",
      type:  'post',
      success: function(res){
        var result = JSON.parse(res);
        var laypage = layui.laypage;
        console.log(res)
        laypage.render({
          elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
          ,count: result.total, //数据总数，从服务端得到
          limit:limit,   //每页条数设置
          groups:2,
          layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
          theme: '#5FB878',
          curr:result.page,
          jump: function(obj, first){
            //首次不执行
            if(!first){
            page=obj.curr;  //改变当前页码
            limit=obj.limit;//每页显示的条数
            findHistoryMessage2(id,page,limit)
            }
          }
        });
        console.log(result.rows)
        var html = laytpl(LAY_tpl.value).render({
          data: result.rows
        });
        $('#LAY_view').html(html);
        var chatMain=$('.layim-chat-main');
        chatMain.scrollTop($('.layim-chat-main')[0].scrollHeight);
        total = result.total;
      }
    });
  }

3.写后台接口

/**
* 查找分页数据
*/
public String findHistoryMessage(String id,String page,String limit, HttpSession session) {
        int pageInt ;
        int limitInt ;
        String uid =   (String)session.getAttribute("userId");
        //查询数量
        int totalCount = messageService.findHistoryCount(uid,id);
        if (page==null||limit==null) {
            limitInt = 20;//第一次请求不会传数据, 默认20条记录
            pageInt = totalCount%20>0?totalCount/20+1:totalCount/20;
        } else {
            pageInt = Integer.parseInt(page);
            limitInt = Integer.parseInt(limit);
        }
        List<Message> messageList = messageService.findHistoryMessage(uid,id,((pageInt-1)*limitInt),limitInt);

        List<Map> chatlogList = new ArrayList<Map>() ;
        if (!CollectionUtils.isEmpty(messageList)){
            User uUser = userService.getUserById(uid);
            User fUser = userService.getUserById(id);
            User tmpUser =null;
            for (Message msg : messageList){
                Map chatlog = new HashMap<>();
                tmpUser  = uid.equals(msg.getUid())?uUser:fUser;
                chatlog.put("username",tmpUser.getUsername());
                chatlog.put("id",msg.getUid());
                chatlog.put("avatar","../../../"+tmpUser.getAvatar());
                chatlog.put("timestamp",msg.getTime().getTime());
                chatlog.put("content",msg.getContent());
                if(StringUtils.hasText(msg.getContent()) && msg.getContent().startsWith("fle(")){
                    chatlog.put("type","file");
                }else{
                    chatlog.put("type","text");
                }
                chatlogList.add(chatlog);
            }
        }
        ChatlogPage<Map> chatlogPage = new ChatlogPage<>();
        chatlogPage.setRows(chatlogList);//设置聊天内容
        chatlogPage.setTotal(totalCount);//设置总数量
        chatlogPage.setPage(pageInt);
        chatlogPage.setSize(limitInt);
        String resultJsonString  = JSON.toJSONString(chatlogPage);
        return resultJsonString;
    }

4.其他 分页数据封装JavaBean

public class ChatlogPage<T> {
    private int page;//分页起始页
    private int size;//每页记录数
    private List<T> rows;//返回的记录集合
    private long total;//总记录条数

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }
}

这里的分页是为聊天记录使用,因为我负责的为一个layim的项目,所有在第一次请求的时候不会传数据,而是查询数据库然后获取最后一页的数据