Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize data Table Hidden column by layui

Shulou Source: shulou.com Published: 2022-06-03 10:59:28 11月15日 Update

Editor to share with you how layui data table hidden columns, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

When using layui as a data table, whether the id of the inserted data is a continuous set of numbers, then you need to use the type attribute of layui's cols.

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

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

So the question is, how do we get our id? does id open another column? if id makes sense, it's OK to open another column. If it doesn't make sense but needs it, it's more beautiful to hide id. Before the layui2.4 version, we could use the done parameter of layui's data table.

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

You can hide id, but for a few seconds, the column of id is loaded and finally hidden. So is there a more effective way to hide it only when layui itself is loaded? So in the layui2.4 version, a new hide attribute was added to the cols parameter of layui.

Table.render ({elem:'# test', url:'$ {pageContext.request.contextPath} / findcustomers', cols: [[{align:'center', title: 'number', sort: true,type:'numbers',width:100}, {field:'cust_id', title: 'ID', hide:true}]], page: true}) The above is all the contents of the article "how to achieve hidden columns in data tables in layui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Tags: Data tables attributes time articles content parameters version Open one orderly effective beautiful not so much method most width meaning series numbers more Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information vpn Shulou Tech Info Microsoft OPPO Reno