blocks|key|932258|text|动态隐藏列|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932259|前面的答案使用的是传统的DataTables语法。在v+1.10%2B中，您可以使用column().visible()|offset|length|932260|var+dt+=+$('#example').DataTable();
//hide+the+first+column
dt.column(0).visible(false);|code-block|syntax|javascript|932261|要隐藏多个列，可以使用columns().visible()：|932262|var+dt+=+$('#example').DataTable();
//hide+the+second+and+third+columns
dt.columns([1,2]).visible(false);|932263|Here+is+a+Fiddle+Demo。|932264|初始化表时隐藏列|932265|要在初始化表时隐藏列，可以使用columns选项：|932266|$('#example').DataTable(+{
++++'columns'+:+[
++++++++null,
++++++++//hide+the+second+column
++++++++{'visible'+:+false+},
++++++++null,
++++++++//hide+the+fourth+column
++++++++{'visible'+:+false+}
++++]
});|932267|对于上述方法，您需要为应保持可见且未指定其他列选项的列指定null。或者，您可以使用columnDefs来定位特定列：|style|CODE|932268|$('#example').DataTable(+{
++++'columnDefs'+:+[
++++++++//hide+the+second+&+fourth+column
++++++++{+'visible':+false,+'targets':+[1,3]+}
++++]
});|932269|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/reference/api/column().visible())|1|https://datatables.net/reference/api/columns().visible()|2|https://jsfiddle.net/zephyr_hex/fvkxe6kw/|3|https://datatables.net/reference/option/columns|4|https://datatables.net/reference/option/columnDefs^0|0|14|I|0|0|0|B|J|1|0|0|0|L|2|0|0|F|7|3|0|0|T|4|16|A|4|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|F|3|G|5|H|7|1N|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1O|8|@]|9|@$D|1P|E|1Q|1|1R]]|A|$]]|$1|M|3|N|5|H|7|1S|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1T|8|@]|9|@$D|1U|E|1V|1|1W]]|A|$]]|$1|Q|3|R|5|6|7|1X|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1Y|8|@]|9|@$D|1Z|E|20|1|21]]|A|$]]|$1|U|3|V|5|H|7|22|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|6|7|23|8|@$D|24|E|25|Y|Z]]|9|@$D|26|E|27|1|28]]|A|$]]|$1|10|3|11|5|H|7|29|8|@]|9|@]|A|$I|J]]|$1|12|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]|1C|$5|15|16|17|A|$18|1D]]|1E|$5|15|16|17|A|$18|1F]]|1G|$5|15|16|17|A|$18|1H]]]]

<h3>Hide columns dynamically</h3>
The previous answers are using legacy DataTables syntax. In v 1.10+, you can use <a href="https://datatables.net/reference/api/column().visible()" rel="noreferrer">column().visible()</a>:

<pre class="lang-js prettyprint-override"><code>var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);
</code></pre>
To hide multiple columns, <a href="https://datatables.net/reference/api/columns().visible()" rel="noreferrer">columns().visible()</a> can be used:
<pre class="lang-js prettyprint-override"><code>var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);
</code></pre>
<a href="https://jsfiddle.net/zephyr_hex/fvkxe6kw/" rel="noreferrer">Here is a Fiddle Demo</a>.
<h3>Hide columns when the table is initialized</h3>
To hide columns when the table is initialized, you can use the <a href="https://datatables.net/reference/option/columns" rel="noreferrer">columns</a> option:
<pre class="lang-js prettyprint-override"><code>$('#example').DataTable( {
 'columns' : [
 null,
 //hide the second column
 {'visible' : false },
 null,
 //hide the fourth column
 {'visible' : false }
 ]
});
</code></pre>
For the above method, you need to specify <code>null</code> for columns that should remain visible and have no other column options specified. Or, you can use <a href="https://datatables.net/reference/option/columnDefs" rel="noreferrer">columnDefs</a> to target a specific column:
<pre class="lang-js prettyprint-override"><code>$('#example').DataTable( {
 'columnDefs' : [
 //hide the second &amp; fourth column
 { 'visible': false, 'targets': [1,3] }
 ]
});
</code></pre>

blocks|key|716129|text|如果再有人进来这对我很管用...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716130|"aoColumnDefs":+[{+"bVisible":+false,+"aTargets":+[0]+}]|code-block|syntax|javascript|716131|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if anyone gets in here again this worked for me...

<pre><code>"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]
</code></pre>

blocks|key|716105|text|您可以在datatable初始化期间对其进行定义|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716106|"aoColumns":+[{"bVisible":+false},null,null,null]|code-block|syntax|javascript|716107|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can define this during datatable initialization

<pre><code>"aoColumns": [{"bVisible": false},null,null,null]
</code></pre>

blocks|key|932216|text|对于使用服务器端处理并使用隐藏列将数据库值传递到jQuery的任何人，我建议使用"sClass“参数。您将能够使用css+display:+none隐藏该列，同时仍然能够检索它的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932217|css：|932218|th.dpass,+td.dpass+{display:+none;}|code-block|syntax|javascript|932219|在datatables+init中：|932220|"aoColumnDefs":+[+{+"sClass":+"dpass",+"aTargets":+[+0+]+}+]+//+first+column+in+visible+columns+array+gets+class+"dpass"|932221|//EDIT:记住将隐藏类也添加到thead单元格中|932222|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

For anyone using server-side processing and passing database values into jQuery using a hidden column, I suggest "sClass" param. You'll be able to use css display: none to hide the column while still being able to retrieve its value.

css: 

<pre><code>th.dpass, td.dpass {display: none;}
</code></pre>

In datatables init:

<pre><code>"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "dpass"
</code></pre>

//EDIT: remember to add your hidden class to your thead cell also

blocks|key|932697|text|var+example+=+$('#exampleTable').DataTable({
++++"columnDefs":+[
++++++++{
++++++++++++"targets":+[0],
++++++++++++"visible":+false,
++++++++++++"searchable":+false
++++++++}
++++]
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|932698|column.Visible属性定义了负责column.Searchable属性可见性的目标属性的位置，该属性负责搜索facility.If，如果设置为false，则该列不能用于搜索。|unstyled|932699|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var example = $('#exampleTable').DataTable({
 "columnDefs": [
 {
 "targets": [0],
 "visible": false,
 "searchable": false
 }
 ]
});
</code></pre>

Target attribute defines the position of the column.Visible attribute responsible for visibility of the column.Searchable attribute responsible for searching facility.If it set to false that column doesn't function with searching.

blocks|key|932444|text|通过api，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932445|var+table+=+$('#example').DataTable();

table.column(+0+).visible(+false+);|code-block|syntax|javascript|932446|查看以下信息：|932447|enter+link+description+here|offset|length|932448|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/reference/api/column().visible()^0|0|0|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

With the api you can use

<pre><code>var table = $('#example').DataTable();

table.column( 0 ).visible( false );
</code></pre>

Look this info:

<a href="https://datatables.net/reference/api/column().visible()" rel="nofollow noreferrer">enter link description here</a>

blocks|key|716467|text|注意:被接受的解决方案现在已经过时了，并且是遗留代码的一部分。对于那些使用较新版本的DataTables+(现在是它的遗留版本)的人来说，这些解决方案可能不适合较新的解决方案:您可以使用：https://datatables.net/reference/api/columns().visible()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|716468|替代方案您可以实现一个按钮：https://datatables.net/extensions/buttons/built-in查看链接下的最后一个选项，该选项允许使用一个可以切换列可见性的按钮。|716469|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/reference/api/columns().visible()|1|https://datatables.net/extensions/buttons/built-in^0|2M|1K|0|0|E|1E|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Note: the accepted solution is now outdated and part of legacy code. <a href="http://legacy.datatables.net/ref" rel="nofollow noreferrer">http://legacy.datatables.net/ref</a> 
The solutions might not be appropriate for those working with the newer versions of DataTables (its legacy now) 
For the newer solution:
you could use: 
<a href="https://datatables.net/reference/api/columns().visible()" rel="nofollow noreferrer">https://datatables.net/reference/api/columns().visible()</a>

alternatives you could implement a button: <a href="https://datatables.net/extensions/buttons/built-in" rel="nofollow noreferrer">https://datatables.net/extensions/buttons/built-in</a>
look at the last option under the link provided that allows having a button that could toggle column visibility.

blocks|key|932278|text|$(document).ready(function()+{
$('#example').DataTable(+{
++++"columnDefs":+[
++++++++{
++++++++++++"targets":+[+2+],
++++++++++++"visible":+false,
++++++++++++"searchable":+false
++++++++},
++++++++{
++++++++++++"targets":+[+3+],
++++++++++++"visible":+false
++++++++}
++++]
});});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|932279|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).ready(function() {
$('#example').DataTable( {
 "columnDefs": [
 {
 "targets": [ 2 ],
 "visible": false,
 "searchable": false
 },
 {
 "targets": [ 3 ],
 "visible": false
 }
 ]
});});
</code></pre>

blocks|key|716557|text|希望这能对你有所帮助。我正在使用这个解决方案在一些列上搜索，但我不想在前端显示它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716558|$(document).ready(function()+{
++++++++$('#example').dataTable({
++++++++++++"scrollY":+"500px",
++++++++++++"scrollCollapse":+true,
++++++++++++"scrollX":+false,
++++++++++++"bPaginate":+false,
++++++++++++"columnDefs":+[
++++++++++++++++{+
++++++++++++++++++++"width":+"30px",+
++++++++++++++++++++"targets":+0,
++++++++++++++++},
++++++++++++++++{+
++++++++++++++++++++"width":+"100px",+
++++++++++++++++++++"targets":+1,
++++++++++++++++},
++++++++++++++++{+
++++++++++++++++++++"width":+"100px",+
++++++++++++++++++++"targets":+2,
++++++++++++++++},++++++++++++++
++++++++++++++++{+
++++++++++++++++++++"width":+"76px",
++++++++++++++++++++"targets":+5,+
++++++++++++++++},
++++++++++++++++{+
++++++++++++++++++++"width":+"80px",+
++++++++++++++++++++"targets":+6,
++++++++++++++++},
++++++++++++++++{
++++++++++++++++++++"targets":+[+7+],
++++++++++++++++++++"visible":+false,
++++++++++++++++++++"searchable":+true
++++++++++++++++},
++++++++++++++++{
++++++++++++++++++++"targets":+[+8+],
++++++++++++++++++++"visible":+false,
++++++++++++++++++++"searchable":+true
++++++++++++++++},
++++++++++++++++{
++++++++++++++++++++"targets":+[+9+],
++++++++++++++++++++"visible":+false,
++++++++++++++++++++"searchable":+true
++++++++++++++++},
++++++++++++++]
++++++++});
++++});|code-block|syntax|javascript|716559|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Hope this will help you.
I am using this solution for Search on some columns but i don't want to display them on frontend.

<pre><code>$(document).ready(function() {
 $('#example').dataTable({
 "scrollY": "500px",
 "scrollCollapse": true,
 "scrollX": false,
 "bPaginate": false,
 "columnDefs": [
 { 
 "width": "30px", 
 "targets": 0,
 },
 { 
 "width": "100px", 
 "targets": 1,
 },
 { 
 "width": "100px", 
 "targets": 2,
 }, 
 { 
 "width": "76px",
 "targets": 5, 
 },
 { 
 "width": "80px", 
 "targets": 6,
 },
 {
 "targets": [ 7 ],
 "visible": false,
 "searchable": true
 },
 {
 "targets": [ 8 ],
 "visible": false,
 "searchable": true
 },
 {
 "targets": [ 9 ],
 "visible": false,
 "searchable": true
 },
 ]
 });
 });
</code></pre>

blocks|key|932362|text|看看我的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932363|我有一个超文本标记语言table+Head|offset|length|style|CODE|932364|<thead>
++++<tr>
++++++++<th+style="width:+20%25">@L("Id")</th>
++++++++<th+style="width:+20%25">@L("IdentityNumber")</th>
++++++++<th+style="width:+20%25">@L("Name")</th>
++++++++<th+style="width:+20%25">@L("MobileNumber")</th>
++++++++<th+style="width:+20%25">@L("RegistrationStatus")</th>
++++++++<th+style="width:+20%25">@L("RegistrationStatusId")</th>
++++++++<th+style="width:+20%25;+text-align:+center;"+data-hide="phone">@L("Actions")</th>
++++</tr>
</thead>|code-block|syntax|javascript|932365|我的Ajax+request返回的内容如下所示|932366|​|932367|📷|atomic|932368|932369|所以我想隐藏Id索引和RegistrationStatusId索引5|932370|$(document).ready(function()+{
++++$('#example').dataTable(+{
++++++++"columnDefs":+[
++++++++++++{+"aTargets":+[0,+5],+"sClass":+"invisible"},//+here+is+the+tricky+part
++++++++]
++++});
});|932371|我希望这能对你有所帮助|932372|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8923baae4df28515eed0f5f936eabffa.png|imageAlt^0|0|B|A|0|0|2|C|0|0|0|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1I|8|@]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|T|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1O|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17|18|-4]]]]

take look at my solution

I have this HTML <code>table Head</code>

<pre><code>&lt;thead&gt;
 &lt;tr&gt;
 &lt;th style="width: 20%"&gt;@L("Id")&lt;/th&gt;
 &lt;th style="width: 20%"&gt;@L("IdentityNumber")&lt;/th&gt;
 &lt;th style="width: 20%"&gt;@L("Name")&lt;/th&gt;
 &lt;th style="width: 20%"&gt;@L("MobileNumber")&lt;/th&gt;
 &lt;th style="width: 20%"&gt;@L("RegistrationStatus")&lt;/th&gt;
 &lt;th style="width: 20%"&gt;@L("RegistrationStatusId")&lt;/th&gt;
 &lt;th style="width: 20%; text-align: center;" data-hide="phone"&gt;@L("Actions")&lt;/th&gt;
 &lt;/tr&gt;
&lt;/thead&gt;
</code></pre>

and my <code>Ajax request</code> returned something like this

<a href="https://i.stack.imgur.com/Og2ro.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Og2ro.png" alt="enter image description here"></a>

so I want to hide Id index [0] and RegistrationStatusId index [5]

<pre><code>$(document).ready(function() {
 $('#example').dataTable( {
 "columnDefs": [
 { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
 ]
 });
});
</code></pre>

I hope this would help you

Is there a way with the jquery datatables plugin to hide (and show) a table column?

I figured out how to reload the table data: using <code>fnClearTable</code> and <code>fnAddData</code>.

But my issue is that in one of my views for the table (e.g. a hidden mode) I don't want to show certain columns.

jquery datatables hide column

数据库

服务器

jQuery

有没有办法用jquery datatables插件来隐藏(和显示)表列？我知道了如何重载表数据:使用fnClearTable和fnAddData。但我的问题是，在我的一个表视图(例如，隐藏模式)中，我不想显示某些列。

问jquery数据表隐藏列
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery数据表隐藏列EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery数据表隐藏列
EN