How to use Layui to implement sortable table column functions

How to use Layui to implement the sortable table column function

In web development, tables are a common way to display data. The sorting function of the table allows users to sort and search table data conveniently. Layui is a very popular front-end UI framework. It provides a wealth of components and interfaces, including table components, making it very simple to implement sortable table column functions. Next, we will introduce in detail how to use Layui to implement the sortable table column function and provide specific code examples.

First, we need to introduce the relevant files of the Layui framework. Add the following code in the tag of the HTML page:

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

Then, add a table element in the tag as shown below :

<table id="demo" lay-filter="test"></table>

The id attribute of this table element is "demo", and the lay-filter attribute is "test", which will be used in the subsequent JavaScript code arrive.

Next, we need to write JavaScript code to implement the sortable table column function. Add the following code in the <script></script> tag of the HTML page:

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

  table.render({
    elem: '#demo',
    url: 'path/to/data.json', // 这里替换成实际的数据接口
    cols: [[ // 表头
      {field: 'id', title: 'ID', sort: true},
      {field: 'username', title: '用户名'},
      {field: 'sex', title: '性别', sort: true},
      {field: 'city', title: '城市'},
      {field: 'sign', title: '签名'},
      {field: 'experience', title: '经验值'},
      {field: 'score', title: '积分', sort: true},
      {field: 'classify', title: '分类'},
      {field: 'wealth', title: '财富', sort: true},
      {field: 'operate', title: '操作'}
    ]]
  });
});

In the above code, we first use the layui.use function to load and call table module. Then use the table.render function to render the table. The meaning of the parameters is as follows:

• elem: The selector of the table element. The id selection of the table element defined earlier is used here. device.
• url: The interface address of the table data, replaced here with the actual data interface.
• cols: The definition of the header, defining the fields and titles of each column in the form of a multi-dimensional array, the sort attribute is optional, if set to true means that the column can be sorted.

Through the above code, we can implement a table with sortable table column functions. When the user clicks on a column in the header of the table, the table will be sorted in ascending or descending order based on the fields in that column.
At the same time, the code also provides a table with paging function, which can display paging and load data according to the actual situation.

It should be noted that path/to/data.json in the above code should be replaced with the actual data interface address, which should return a JSON data that conforms to the Layui table data format .

To sum up, it is very simple to use Layui to implement the sortable table column function. You only need to introduce the Layui framework, define table elements and table headers, and then use Layui's table module to render and sort. With this approach, we can quickly implement a feature-rich and user-friendly sortable table. I hope this article can help you understand and use Layui.

The above is the detailed content of How to use Layui to implement sortable table column functions. For more information, please follow other related articles on the PHP Chinese website!