layui怎么实现数据分页功能

什么是layui数据分页

layui是一个非常受欢迎的前端UI框架，自带了数据表格组件，为用户提供了方便的数据展示功能。数据分页是其中一个重要的组件，其作用是将大量的数据按照预设的每页数量进行分页显示，让用户可以轻松浏览长列表。

数据分页功能的实现

首先，我们需要引入layui和jQuery库，代码如下：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>

然后，我们需要在HTML中创建一个表格，并添加一个div元素来容纳分页组件：

<table class="layui-table" lay-size="sm">
  <thead>
    <tr>
      <th>编号</th>
      <th>用户名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="userList">
  </tbody>
</table>

<div class="layui-table-page">
  <div id="userPageList"></div>
</div>

接下来，我们需要编写JavaScript代码调用分页组件。首先，我们需要设置分页组件的配置参数，如下：

var userPage = layui.laypage;
var userPagingOptions = {
  elem: 'userPageList',
  limit: 10,
  count: 0,
  layout: ['limit', 'prev', 'page', 'next', 'skip'],
  jump: function(obj, first) {
    if (!first) {
      loadUserList(obj.curr, obj.limit);
    }
  }
};

此处我们设置了每页显示10条数据，将分页组件显示在id为userPageList的div元素里面，还设置了一个jump函数，在页面跳转时会自动调用它，用于调用后台接口获取对应页码的数据。

最后，我们需要编写JavaScript函数来获取后台数据并展示在表格上：

function loadUserList(page, limit) {
  $.ajax({
    type: "GET",
    url: "/api/getUserList",
    data: {"page": page, "limit": limit},
    success: function(data){
      userPagingOptions.count = data.count;
      userPage.render(userPagingOptions);

      var userListHtml = "";
      for (var i = 0; i < data.list.length; i++) {
        userListHtml += "<tr>" +
                        "<td>" + data.list[i].id + "</td>" +
                        "<td>" + data.list[i].name + "</td>" +
                        "<td>" + data.list[i].gender + "</td>" +
                        "</tr>";
      }
      $("#userList").html(userListHtml);
    }
  });
}

此函数会通过ajax请求获取后台接口数据，并将数据展示在表格上。在获取到数据后，会调用分页组件的render函数，从而实现分页控制。

如何美化数据分页组件

通过CSS样式可以轻松美化layui的数据分页组件，以下是一些样式示例：

/* 修改分页组件布局 */
.layui-laypage {
  margin-top: 10px;
}

/* 修改分页组件背景色 */
.layui-laypage .layui-laypage {
  margin: 0;
  background: none;
}

/* 修改按钮样式 */
.layui-laypage a,
.layui-laypage em {
  background-color: #fff !important;
  border-radius: 3px !important;
  font-size: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  height: 28px;
  line-height: 28px;
  color: #666 !important;
}

/* 修改选中状态样式 */
.layui-laypage a.layui-laypage-curr,
.layui-laypage em.layui-laypage-spr {
  background-color: #1E9FFF !important;
  border-color: #1E9FFF !important;
  color: #fff !important;
}

/* 修改边框去除 */
.layui-laypage a,
.layui-laypage em {
  border: none;
  border-radius: 0;  
  margin-right: 2px;
}

/* 隐藏'上一页'和'下一页' */
.layui-laypage a.layui-laypage-prev,
.layui-laypage a.layui-laypage-next {
  display: none;
}

通过这些CSS样式，我们可以将分页组件美化得更加美观，符合网站的整体设计风格。