_<td colspan="x"></td>
_を使用するたびに、次のエラーが表示されます。
不明なTypeError:undefined(…)のプロパティ '_DT_CellIndex'を設定できません
$("table").DataTable({});
_<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<table style="width:50%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">3 4</td>
<td colspan="3">4 5 6</td>
</tr>
</tbody>
</table>
_
DataTables.jsがなくても正常に動作しますが、datatable.jsでこの構造を使用すると動作しません。上記のテーブル構造が必要です。このテーブル構造datatable.jsをどのように使用できるか、誰にもわかりませんか?
削除されたすべてのセルに「不可視」セルを追加することにより、colspanサポートの欠如を回避できます。
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>Normal column</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
DataTablesは文句を言わず、テーブルは正常にレンダリングされ、並べ替えは機能します(非表示の列は空の文字列として並べ替えられます)。
Rowspanではこれを試していません。
Dirk Bergstrom が提供する優れたソリューションは、HTMLソースデータでのみ機能します。
Ajaxソースデータで同じアイデアを使用することもできます。
TR
要素がテーブル本体に作成されたときに必要なセルを変更するには、 createdRow オプションを使用する必要があります。
例えば:
var table = $('#example').DataTable({
ajax: 'https://api.myjson.com/bins/qgcu',
createdRow: function(row, data, dataIndex){
// If name is "Ashton Cox"
if(data[0] === 'Ashton Cox'){
// Add COLSPAN attribute
$('td:eq(1)', row).attr('colspan', 3);
// Hide required number of columns
// next to the cell with COLSPAN attribute
$('td:eq(2)', row).css('display', 'none');
$('td:eq(3)', row).css('display', 'none');
// Update cell data
this.api().cell($('td:eq(1)', row)).data('N/A');
}
}
});
コードとデモについては この例 をご覧ください。
詳細については、 jQuery DataTables:テーブルボディTBODYのCOLSPAN-Ajaxデータ の記事を参照してください。
RowsGroup プラグインを使用して、ROWSPAN
属性をエミュレートすることができます。
プラグインを使用するには、JavaScriptファイルを含める必要がありますdataTables.rowsGroup.js
およびrowsGroup
オプションを使用して、グループ化を適用する列のインデックスを示します。
var table = $('#example').DataTable({
'rowsGroup': [2]
});
コードとデモについては この例 をご覧ください。
詳細については、 jQuery DataTables:テーブルボディTBODYのROWSPAN の記事を参照してください。
上記の両方の回避策を組み合わせると、セルを垂直方向と水平方向に同時にグループ化できます。
コードとデモについては この例 をご覧ください。
jQuery DataTables:テーブルボディTBODYのCOLSPAN-COLSPANおよびROWSPAN の記事をご覧ください。
scrollX
を使用している場合
<thead>
<tr>
<th style="width: 20px;"></th>
<th>column H</td>
<th>column H</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>123</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
</tbody>
#Dirk_Bergstromの修正された回答
データテーブルはcolspanをサポートしていないため、通常はリストスタイルの順序なしリスト(ul)を使用することになりました。