How to hide table rows in layui

How to hide table rows in layui: first open the corresponding code file; then use the hide attribute of layui's cols parameter; finally add "hide: true" to hide the id column.

The operating environment of this tutorial: Windows 7 system, layui version 2.4. This method is suitable for all brands of computers.

Recommended: "javascript basic tutorial"

When using layui to make a data table, if the id of the inserted data is a set of consecutive numbers, then you need Use the type attribute of layui's cols.

table.render({
    elem: '#test'
    ,url:'${pageContext.request.contextPath}/findcustomers'
    ,cols: [[
      {align:'center', title: '编号', sort: true,type:'numbers',width:100}
    ]]
    ,page: true
  });

We will get an ordered sequence (ps: the width attribute must be added here, using minWidth is useless, if width is not used, then layui will be used The default width of the table is 40)

Then the question is, how do we get our id? Can we open another column for the id? If the id is meaningful, then it is okay to open another column. Yes, if it is meaningless but necessary, it would be more beautiful to hide the ID. Before the layui2.4 version, we could use the done parameter of the layui data table

  table.render({
    elem: '#test'
    ,url:'${pageContext.request.contextPath}/findcustomers'
    ,cols: [[
      {align:'center', title: '编号', sort: true,type:'numbers',width:100}
      ,{field:'cust_id', title: 'ID'}
 
    ]]
     ,done:function(res,curr,count){ // 隐藏列
           $(".layui-table-box").find("[data-field='cust_id']").css("display","none");
           }
    ,page: true
  });

to hide the id, but for a few tenths of a second, the id column was loaded. , the last one hidden. So is there a more effective way? Layui can only hide it when loading. So in version 2.4 of layui, the cols parameter of layui has a new hide attribute.

table.render({
    elem: '#test'
    ,url:'${pageContext.request.contextPath}/findcustomers'
    ,cols: [[
      {align:'center', title: '编号', sort: true,type:'numbers',width:100}
      ,{field:'cust_id', title: 'ID', hide:true}
 
    ]]
    ,page: true
  });

We only need to add hide: true to hide the id column and get the data.

The above is the detailed content of How to hide table rows in layui. For more information, please follow other related articles on the PHP Chinese website!