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.

Ishmul

Answer 1

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

Photophore

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

@Blazemonger: there are anchors, for easy access: datatables.net/api#fnSetColumnVis – Afflatus

@RobotMess Anchors are fine for humans to link to, but Google search results only go to the top of the page. – Trioxide

Answer 2

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

Silkaline

It could also be done with columns.visible option. If you want your answer to be thorough, I would mention that as well. – Posada

That's great update, but I've meant the option columns,visible, see datatables.net/reference/option/columns.visible – Posada

@Posada - aha, yes. I was thinking dynamic visibility. I've added detail about hiding columns on init. – Silkaline

This is good, but one issue is nRow ignores hidden columns on edit/cancel if visible is false. – Wordsworth

How can we access the hidden column value when posting back? Thanks – Indiscriminate

Answer 3

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

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

Anthropomorphic

Answer 4

You can define this during datatable initialization

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

Padova

"aoColumns": [{"bVisible": false}] was sufficient for me (without nulls). – Plagio

@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. – Alfieri

Answer 5

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

Alfieri

Answer 6

With the api you can use

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

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

Look this info:

enter link description here

Marchland

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

Answer 7

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

Carhart

Answer 8

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.

Northumbrian

Worked for me, thanks fort the answer – Sextant

Answer 9

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.

Interlocutor

Answer 10

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.

Deadwood

Answer 11

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

Failure

Answer 12

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"},
        ]

datatables codeigniter 4

Cadaverous

Answer 13

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

Soukup

Answer 14

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

Gurney

Please do not upload images of code/data/errors. – Curriculum