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 fnClearTable and fnAddData.
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.
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);
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] }
]
});
columns.visible option. If you want your answer to be thorough, I would mention that as well.columns,visible, see datatables.net/reference/option/columns.visible
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
if anyone gets in here again this worked for me...
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]
You can define this during datatable initialization
"aoColumns": [{"bVisible": false},null,null,null]
"bVisible": false while all other columns in the table are not passed any arguments. This is because when you use "aoColumns": [ ... ] you have to send a comma separated list of ALL columns in the table. If you use "aoColumnDefs": [ ... ] instead (see @ahaliav_fox's answer) you only need declare an array of column indexes to apply the property to. Therefore you don't need to declare the state of every column whether it gets the property or not.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
With the api you can use
var table = $('#example').DataTable();
table.column( 0 ).visible( false );
Look this info:
table.column( 0 ).visible( false );If use data from json and use Datatable v 1.10.19, you can do this:
$(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.
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.
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
},
]
});
});
For automatically target always error style
order: [],
columns: [
{data: "no", orderable: false},
{data: "photo" },
{data: "full_name" },
{data: "nik" },
{data: "position" },
{data: "created_at"},
{data: "action", className:"text-center"},
]
$(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
