我正在使用 DataTables 库创建响应式表格。我想要实现一种行为，其中 DataTable 中的所有列在单击时都可以切换折叠/展开状态（最后一列除外）。 这是我当前代码的简化版本：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.7/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display responsive nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
var table = $('#example').DataTable();
});
function performAction() {
// Perform the desired action here
alert("Action performed!");
}
</script>
</body>
</html>
截至目前，单击数据表中的第一列即可切换折叠状态， 我希望所有其他列“AGE”也能在 DataTable 切换折叠状态时工作， 但是，我想从这种行为中排除最后一列，并使其在单击时执行不同的操作。
我们可以使用这些库。我认为您的代码可能缺少一些库，因此无法正常工作。 希望它会有所帮助！！
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td><button onclick="performAction()">Do Action</button></td>
</tr>
</tbody>
</table>
<script>
new DataTable('#example', {
//order: [[1, 'asc']],
//rowGroup: { dataSrc: 1 }
});
function performAction() {
// Perform the desired action here
alert("Action performed!");
}
</script>
</body>
</html>