layui 表格在点击表头排序时数据错乱

需求:

1、Layui中表格数据全部返回,由前端进行分页。
2、当表格进行排序的时候,需要重新请求接口,遇到问题:
排序的小图标不高亮
后端返回的数据顺序和前端显示的不一致

解决:

// 渲染的对象中添加以下配置:
initSort: {
    
     // 这里是排序的字段和升降序 }
autoSort: false,
// 表格渲染
var tableRender = function (data,cols,tableLast) {
    
    
	// console.log(data[0].assetName)
	let obj = {
    
    
	    elem: "#LAY-prepaidStatement-table",
	    done: function (res, curr, count) {
    
    
	    },
	    cols: [cols],
	    data,
	    skin: "line", //表格风格
	    size: "lg",
	    even: true,
	    autoSort: false,
	    cellMinWidth: 100,
	    totalRow: tableLast,
	    page:{
    
    curr:G_pageNo},//是否显示分页
	    limits: [10,15,20],
	    limit: G_pageSize, //每页默认显示的数量
	}
	if (sortKey && (sortType !== -1)) {
    
    
	    obj.initSort = {
    
    
	        field: sortKey,
	        type: sortType === 2 ? 'desc' : sortType === 1 ? 'asc' : -1,
	    } //记录初始排序,如果不设的话,将无法标记表头的排序状态。
	}
	table.render(obj);
};

//触发排序事件
table.on('sort(xxx-table)', function(obj){
    
     //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    sortKey = obj.field
    sortType = obj.type === 'asc' ? 1 : obj.type === 'desc' ? 2 : -1
    // 重新获取列表数据
});

猜你喜欢

转载自blog.csdn.net/Y1914960928/article/details/134404676