layui td排序
时间: 2023-10-13 07:05:15 浏览: 90
layui表格 列自动适应大小失效的解决方法
在使用 layui 表格组件进行排序时,你可以按照以下步骤操作:
1. 在 HTML 中定义一个基本的表格结构,使用 layui 的表格组件。例如:
```html
<table id="demo" lay-filter="test"></table>
```
2. 在 JavaScript 中,使用 layui 的表格模块进行初始化,并配置排序功能。例如:
```javascript
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url: '/your/data/url', // 设置数据接口
page: true, // 开启分页
cols: [[
{field: 'id', title: 'ID', sort: true}, // 设置需要排序的字段
{field: 'name', title: '姓名'},
{field: 'score', title: '分数', sort: true},
]]
});
});
```
在上面的代码中,`sort: true` 表示该字段支持排序。
3. 当用户点击表头时,会自动触发排序事件。你可以监听 `sort` 事件,获取排序参数,并重新加载表格数据。例如:
```javascript
table.on('sort(test)', function(obj){
// obj.field 为当前排序的字段名
// obj.type 为当前排序的类型,可能的值有:desc(降序)、asc(升序)、null(默认排序)
// 重新加载表格数据
table.reload('demo', {
initSort: obj, // 设置初始排序参数
where: {
field: obj.field, // 将排序字段传递到后端
order: obj.type // 将排序类型传递到后端
}
});
});
```
在这里,你可以根据 `obj.field` 和 `obj.type` 来发送请求,获取排序后的数据。
这样,通过以上步骤配置后,你的 layui 表格就支持排序功能了。
阅读全文