Introduction to the method of hiding columns in table data tables in layui

Layui is the only domestic template company now. The data table function is powerful, but I don’t know how to use python or django to splice json and send the output to the data table. Then I have no choice but to use a stupid method and loop through it.

The id column is retained in the data table to obtain the id value of the changed data when editing and modification, but it does not need to be displayed, so it needs to be hidden.

The code of the id column is:

, cols: [[ //标题栏
                    {field: 'data_id', title: 'ID', width: 50,style:'display:none;'}

This code can hide the value of the id column below, but the id of the title bar is still there. Then, when the problem arises, use powerful Use jquery to solve it.

 $('table.layui-table thead tr th:eq(0)').addClass('layui-hide');

When there are multiple tables, I found that the above code can only hide the title bar of the first column of the first table. If there are multiple tables on a page, you need to use:

 $('table.layui-table thead tr th:nth-child(1)').addClass('layui-hide');

There is another problem. If there is a selection box in the table, it will occupy the first column of the table by default. At this time, the above code will go wrong. You can only push to, use the first code, select one by one. Note that layui's data table will automatically generate 5 tables:

My current page only has two tables, one regular and one with a selection box. After searching, I found that there are 10

 $('table:eq(1).layui-table thead tr th:eq(0)').addClass('layui-hide');
$('table:eq(6).layui-table thead tr th:eq(1)').addClass('layui-hide');

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to the method of hiding columns in table data tables in layui. For more information, please follow other related articles on the PHP Chinese website!