Bootstrap Tableの機能のみで、サブテーブル（詳細表示）がデータがない場合に開かないようにする方法として、detailView機能とonExpandRowイベントを使用することができます。この方法では、サブテーブルのデータがない場合に詳細表示をキャンセルすることが可能です。
以下に、具体的なコード例を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.css">
<title>Bootstrap Table</title>
</head>
<body>
<div class="container mt-5">
<table id="table"
data-toggle="table"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-on-expand-row="onExpandRow">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Bob</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.js"></script>
<script>
// サブテーブルの詳細フォーマッター
function detailFormatter(index, row) {
if (row.id === 1) {
// データがある場合のみ、詳細表示
return `<p>Details for ${row.name}</p>`;
}
// データがない場合は空を返す
return '';
}
// 詳細行を展開するときに実行される処理
function onExpandRow(index, row, $detail) {
// データがない場合はサブテーブルをキャンセル
if (!detailFormatter(index, row)) {
$('#table').bootstrapTable('collapseRow', index);
}
}
</script>
</body>
</html>
解説
-
detailView: Bootstrap Tableの詳細表示機能を有効にしています。 -
detailFormatter: この関数は、詳細表示の内容をカスタマイズします。ここで、特定の条件（idが1である場合）にデータを返し、その他の行は空文字列を返しています。 -
onExpandRow: 行が展開される際に呼ばれるイベントで、詳細表示が空（データがない）場合は、その行を折りたたむ（閉じる）ようにしています。
このようにして、データがない場合に詳細表示が自動的に閉じられるため、ユーザーが無駄にサブテーブルを開いてしまうことを防ぐことができます。
ｒ