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|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|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|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|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|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

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|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|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.

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问jquery数据表隐藏列
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery数据表隐藏列EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery数据表隐藏列
EN