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

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

User · Answer

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

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  amp  fourth column            visible   false   targets    1 3

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

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

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

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

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

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

User · Answer

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

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

[javascript] jquery datatables hide column

Examples related to javascript

Examples related to jquery

Examples related to datatables