jquery datatables hide column
JavascriptJqueryDatatablesJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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);
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] }
]
});
Solution 2 - Javascript
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
Solution 3 - Javascript
if anyone gets in here again this worked for me...
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]
Solution 4 - Javascript
You can define this during datatable initialization
"aoColumns": [{"bVisible": false},null,null,null]
Solution 5 - Javascript
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
Solution 6 - Javascript
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.
Solution 7 - Javascript
With the api you can use
var table = $('#example').DataTable();
table.column( 0 ).visible( false );
Look this info:
Solution 8 - Javascript
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
}
]
});
});
Solution 9 - Javascript
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.
Solution 10 - Javascript
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.
Solution 11 - Javascript
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
},
]
});
});
Solution 12 - Javascript
$(document).ready(function() {
$('#example').DataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
});});
Solution 13 - Javascript
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