jquery datatables hide column

Question

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.

score 81 · Answer 1 · edited Jun 20 '20 at 09:12

81

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 27 '16 at 16:29

devlin carnate

8,309
7
48
82

It could also be done with [`columns.visible`](https://datatables.net/reference/option/columns.visible) option. If you want your answer to be thorough, I would mention that as well. – Gyrocode.com Jul 27 '16 at 16:41
That's great update, but I've meant the option `columns,visible`, see https://datatables.net/reference/option/columns.visible – Gyrocode.com Jul 27 '16 at 17:32
1

@Gyrocode.com - aha, yes. I was thinking dynamic visibility. I've added detail about hiding columns on init. – devlin carnate Jul 27 '16 at 17:50
This is good, but one issue is nRow ignores hidden columns on edit/cancel if visible is false. – JoshYates1980 Jun 08 '17 at 13:57
How can we access the hidden column value when posting back? Thanks – singhswat May 03 '18 at 09:48

score 59 · Accepted Answer · answered Apr 13 '11 at 19:42

59

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

answered Apr 13 '11 at 19:42

Damb

14,410
6
47
49

3

I really wish the datatables API site put each method on a different page -- it makes it so much easier to Google for a particular one. – Blazemonger Feb 07 '13 at 21:19
@Blazemonger: there are anchors, for easy access: http://www.datatables.net/api#fnSetColumnVis – Robot Mess Sep 30 '13 at 11:15
@RobotMess Anchors are fine for humans to link to, but Google search results only go to the top of the page. – Blazemonger Sep 30 '13 at 12:49

score 55 · Answer 3 · answered May 13 '12 at 11:17

55

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

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

answered May 13 '12 at 11:17

ahaliav fox

2,217
22
21

score 25 · Answer 4 · edited Jan 06 '12 at 21:08

25

You can define this during datatable initialization

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

edited Jan 06 '12 at 21:08

Brandon

68,708
30
194
223

answered Jan 06 '12 at 20:53

Pankaj Patel

259
3
2

1

"aoColumns": [{"bVisible": false}] was sufficient for me (without nulls). – Gerry Gurevich Jan 15 '15 at 09:01
1

@Gerry_Gurevich is partly correct. In this example the first column gets the property `"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. – DrewT Mar 25 '15 at 07:32

score 17 · Answer 5 · answered May 21 '13 at 22:01

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

score 6 · Answer 6 · answered Jul 13 '17 at 06:59

6

With the api you can use

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

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

Look this info:

enter link description here

answered Jul 13 '17 at 06:59

goero_ag

99
1
6

score 6 · Answer 7 · answered Sep 26 '18 at 17:21

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

score 6 · Answer 8 · answered Jun 14 '19 at 11:49

6

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.

answered Jun 14 '19 at 11:49

Susampath

706
10
13

1

Worked for me, thanks fort the answer – Newbee Mar 18 '22 at 23:34

score 2 · Answer 9 · answered Jul 09 '15 at 10:08

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.

score 2 · Answer 10 · answered Oct 26 '17 at 15:06

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.

score 0 · Answer 11 · answered Sep 25 '18 at 12:01

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

score -1 · Answer 12 · answered Nov 10 '16 at 10:18

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

Basheer AL-MOMANI · Answer 13 · 2016-12-11T10:32:58.113

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

[Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551) — Heretic Monkey, Dec 28 '22 at 04:30

jquery datatables hide column

13 Answers13

Hide columns dynamically

Hide columns when the table is initialized

Linked