Does layui table support self-adaptation?

Does layui table support adaptive?

layui table does not support adaptive. For example, when adding a data table to the page, you will find that the width of each column of the data table cannot adapt to the table, and they are all crowded together. After reading the official documentation, I found that the column width can be set for the table:

layuiTable.render({
width: 710,
elem: '#tabSta',
url: "/pickTicket/tytr", 
cols: [[
{ field: "ShiftsID", title: "班次ID", hide: true },
{ field: "scheduleCoding", title: "班次", align: "center" },
{ field: "time", title: "时间", align: "center" },
{ field: "carNumber", title: "车辆编号", align: "center" } 
]],
});

However, here comes the problem. When I shrink the page, the width of the table is still the original width and cannot meet the adaptive size requirements. The reason is that the width I just set to it is a fixed size width.

Since the above method does not work, then proceed to the second solution. I checked on the browser page and found that when the width is set to 100%, the width of the data table can be adaptively resized. Therefore, add the parameter done to the corresponding code of the data table to customize a style for the data table.

The relevant code is as follows:

tabrecord =layuiTable.render({
elem: ‘#tabStation’,
url: “/pickTicket/tytr”,
done: function (res, curr, count){
KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }̲, cols: [[ { fi…(“table”).css(“width”, “100%”);

You can also write $("table").width("100%") like this.

With this setting, we return to the browser page to view it. No matter how we zoom the page, the data table can adapt to the page size.

For more technical articles related to Layui, please visit the Layui Framework Tutorial column to learn!

The above is the detailed content of Does layui table support self-adaptation?. For more information, please follow other related articles on the PHP Chinese website!