jquery datatables hide column

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.

Answers:

Answer

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

Answer

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

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

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

You can define this during datatable initialization

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

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

Answer

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

With the api you can use

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

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

Look this info:

enter link description here

Answer

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.

Answer
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.

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

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.

Answer

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

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

enter image description here

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.