jQuery Datatable 動態顯示/隱藏列

Question

我正在嘗試動態顯示/隱藏數據表列。 為此，我將使用官方數據表網站給出的示例。

這是我的數據表的代碼：

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

<a>的 HTML：

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

我的問題是，我只是想根據a.toggle-vis的可見性為它添加CSS類。

我試過這樣的東西。 但它不適合我。

$('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
});

希望有人可以幫助我。

Answer 1

最后，您的方法是正確的 - 只需稍作改動：移動以下行（切換列的可見性）...

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

...從if語句內部到if語句之前。

這將確保切換總是發生在選定的列上。