jquery datatables hide column

You can hide columns by this command:

fnSetColumnVis( 1, false );

Where first parameter is index of column and second parameter is visibility.

Via: http://www.datatables.net/api - function fnSetColumnVis

You can define this during datatable initialization

"aoColumns": [{"bVisible": false},null,null,null]

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

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

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:

th.dpass, td.dpass {display: none;}

In datatables init:

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

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

You can try as below to hide/show dynamically runtime

Hide : fnSetColumnVis( 1, false, false );

Example: oTable.fnSetColumnVis(item, false,false);

Show : fnSetColumnVis( 1, true, false );

Example: oTable.fnSetColumnVis(item, false,false);

Here, oTable is object of Datatable.

Hide columns dynamically

The previous answers are using legacy DataTables syntax. In v 1.10+, you can use column().visible():

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

To hide multiple columns, columns().visible() can be used:

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

Here is a Fiddle Demo.

Hide columns when the table is initialized

To hide columns when the table is initialized, you can use the columns option:

$('#example').DataTable( {
'columns' : [
null,
//hide the second column
{'visible' : false },
null,
//hide the fourth column
{'visible' : false }
]
});

For the above method, you need to specify null for columns that should remain visible and have no other column options specified. Or, you can use columnDefs to target a specific column:

$('#example').DataTable( {
'columnDefs' : [
//hide the second & fourth column
{ 'visible': false, 'targets': [1,3] }
]
});

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

take look at my solution

I have this HTML table Head

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

and my Ajax request returned something like this

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

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

I hope this would help you

With the api you can use

var table = $('#example').DataTable();


table.column( 0 ).visible( false );

Look this info:

enter link description here

Note: the accepted solution is now outdated and part of legacy code. http://legacy.datatables.net/ref 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: https://datatables.net/reference/api/columns().visible()

alternatives you could implement a button: https://datatables.net/extensions/buttons/built-in look at the last option under the link provided that allows having a button that could toggle column visibility.

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.

$(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
},
]
});
});

If use data from json and use Datatable v 1.10.19, you can do this:

More info

$(document).ready(function() {
$('#example').dataTable( {


columns= [
{
"data": "name_data",
"visible": false
}
]
});
});

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

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.