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

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

User · 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

User · 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

User · 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

User · Answer

if anyone gets in here again this worked for me      aoColumnDefs       bVisible   false   aTargets    0

User · Answer

take look at my solution  I have this HTML table Head   lt thead gt       lt tr gt           lt th style  width  20   gt  L  Id   lt  th gt           lt th style  width  20   gt  L  IdentityNumber   lt  th gt           lt th style  width  20   gt  L  Name   lt  th gt           lt th style  width  20   gt  L  MobileNumber   lt  th gt           lt th style  width  20   gt  L  RegistrationStatus   lt  th gt           lt th style  width  20   gt  L  RegistrationStatusId   lt  th gt           lt th style  width  20   text-align  center   data-hide  phone  gt  L  Actions   lt  th gt       lt  tr gt   lt  thead gt    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

User · 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

User · Answer

With the api you can use  var table       example   DataTable     table column  0   visible  false      Look this info   enter link description here

User · Answer

You can define this during datatable initialization   aoColumns      bVisible   false  null null null

User · 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

User · Answer

document  ready function         example   DataTable         columnDefs                            targets     2                 visible   false               searchable   false                                   targets     3                 visible   false

User · 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

User · 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

[javascript] jquery datatables hide column

Hide columns dynamically

Hide columns when the table is initialized

Examples related to javascript

Examples related to jquery

Examples related to datatables