How to use Layui to develop a data display page with paging function

How to use Layui to develop a data display page with paging function

Layui is a lightweight front-end UI framework that provides simple and beautiful interface components and rich interactive experience. During development, we often encounter situations where we need to display large amounts of data and perform paging. The following is an example of a data display page with paging function developed using Layui.

First, we need to introduce the relevant files and dependencies of Layui. Add the following code to the tag of the html page:

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

Next, we need to create a container that contains data and pagination. For example, we can use a <tbody> element to display data, and add a <div> at the bottom of the page to display pagination-related content.

<table class="layui-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="dataContainer"></tbody>
</table>

<div id="pageContainer" class="layui-laypage"></div>

Now, we can use JavaScript to dynamically load data and paginate. First, we need to initialize some components of Layui.

layui.use(['table', 'laypage'], function(){
  var table = layui.table;
  var laypage = layui.laypage;

  // 数据接口
  var dataUrl = 'path/to/your/data';

  // 渲染表格
  table.render({
    elem: '#dataContainer',
    url: dataUrl,
    page: false, // 首次不显示分页
    cols: [[ // 表头
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'gender', title: '性别'}
    ]]
  });

  // 获取数据总数
  $.get(dataUrl, function(res){
    var total = res.data.length;

    // 渲染分页
    laypage.render({
      elem: 'pageContainer',
      count: total,
      limit: 10,  // 每页显示的数量
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],  // 显示方式
      jump: function(obj, first){
        if(!first){
          // 点击分页时重新加载数据
          table.reload('dataContainer', {
            page: {
              curr: obj.curr // 当前页码
            }
          });
        }
      }
    });
  });
});

The above code uses Layui’s table and laypage components. First, the data table is rendered through the table.render method, in which the url parameter specifies the address of the data interface, and the cols parameter defines the fields and titles of the table header. Then use the $.get method to get the total number of data, and use the laypage.render method to render the paging component.

When paging is clicked, the jump callback function will be triggered and the data will be reloaded. Through the table.reload method, we can pass in the current page number to load the corresponding data.

It should be noted that the data interface in the above example needs to return a data format that meets the requirements of Layui. For details, please refer to Layui's documentation.

Through the above steps, we can use Layui to develop a data display page with paging function. The entire process is simple and easy to understand, allowing users to quickly browse and manage large amounts of data.

The above is the detailed content of How to use Layui to develop a data display page with paging function. For more information, please follow other related articles on the PHP Chinese website!