jQuery Datatable Show / hide columns dynamically

Question

I am trying to show/hide datatable columns dynamically. For this, here I am going with the example which is given by the official datatable website.

This is the code for my datatable:

HTML:

<table id="itemEdit" class="table collapsed">
    <thead>
      <tr>
        <th>ID</th>
        <th>SKU</th>
        <th>Barcode</th>
        <th>Item Name</th>
        <th>Price</th>
      </tr>
    </thead>

    <tbody></tbody>
</table>

JS:

var tableId = "#itemEdit";
var $_table = $(tableId).DataTable({ 
    //dom:            "Bfrtip",
    scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,

    "ajax": './view_items.php',
    "columns": [            
      {"data": "id", "class": "align-middle"},
      {"data": "sku","class": "align-middle"},            
      {"data": "barcode","class": "align-middle"},            
      {"data": "itemname","class": "align-middle"},            
      {"data": "price","class": "align-middle"},            
    ]
})

HTML for <a>:

<div class="btn-group dropright dd-backdrop">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Columns</span>
    </button>
    <div class="dropdown-menu p-0 ">
      <a href="#" class="dropdown-item toggle-vis" data-column="4">
        Item Name
      </a>
    </div>
</div>

My question is, just I want to add CSS class for the a.toggle-vis base on its visibility.

I tried it something like this. But its not working for me.

$('a.toggle-vis').on('click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = $_table.column($(this).attr('data-column'));

    //console.log(column)

    if (column.visible() === true) {
      $(this).addClass('showing').removeClass('not-showing');
      column.visible(!column.visible());
    } else {
      $(this).removeClass('showing').addClass('not-showing');
      $(this).removeClass('active');
    }
       
    $_table.columns.adjust().draw( false ); // adjust column sizing and redraw
});

Hope somebody may help me out.

Your code works for me, using the demo you linked to. Can you provide a minimal reproducible example? — andrewJames
– andrewJames, Commented May 13, 2022 at 15:03
Just to note: (a) You don't need if (column.visible() === true), you can just use if (column.visible()) - that will evaluate to true or false. And (b) Did you pre-populate your <a> elements with the initial extra class showing? Finally (c) I am not sure what $(this).removeClass('active'); achieves since that class does not exist in the page (at least not in the demo you linked to ). — andrewJames
– andrewJames, Commented May 13, 2022 at 15:04
@andrewJames According to your comment: (a) I just tried if (column.visible()) then its working at first, but then its not working and I can't get the column visible. (b) I need those css classes to style <a> based on its visibility. (c) actually its not needed — ugnuku
– ugnuku, Commented May 13, 2022 at 15:15

andrewJames · Accepted Answer · 2022-05-13 17:26:31Z

1

In the end, your approach is correct - with one small change: Move the following line (which toggles the column's visibility)...

column.visible(!column.visible());

...from inside the if statement to before the if statement.

That will ensure the toggle always happens for the selected column.

answered May 13, 2022 at 17:26

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Datatable Show / hide columns dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related