我正在嘗試動態顯示/隱藏資料表列。為此，我將使用官方資料表網站給出的示例。
這是我的資料表的代碼：
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>
我的問題是，我只是想根據其可見性CSS為基礎添加類。a.toggle-vis
我試過這樣的東西。但它不適合我。
$('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
});
希望有人可以幫助我。
uj5u.com熱心網友回復：
最后，您的方法是正確的 - 只需稍作改動：移動以下行（切換列的可見性）...
column.visible(!column.visible());
...從陳述句內部到if陳述句之前if。
這將確保切換總是發生在選定的列上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475384.html
標籤：javascript jQuery 数据表
上一篇：如何對齊左側和全高側導航選單
下一篇：在選單Jquery上顯示當前頁面