jQuery Datatable 动态显示/隐藏列

Question

我正在尝试 show/hide 动态数据表列。为此，我在这里使用官方数据表网站提供的example。

这是我的数据表的代码：

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

我的问题是，我只想根据可见性为 a.toggle-vis 添加 CSS class。

我试过这样的。但它对我不起作用。

$('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 语句之前。

这将确保所选列始终发生切换。

jQuery Datatable 动态显示/隐藏列

jQuery Datatable Show / hide columns dynamically

javascript

datatable

jquery