Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.