在數據展示頁面中，表格是一種常見的方式。然而，有時候當表格的列數比較多時，表頭也會變得很長，影響了頁面的美觀度和用戶的閱讀體驗。為此，我們可以考慮合并表頭的方式來解決這個問題。 在jquery datatable中，有一種叫做ColumnGroup的插件可以幫助我們實現合并表頭的效果。下面我們來看一下具體的實現方式。 首先，在HTML代碼中創建一個表格，其中表頭的每一列都需要使用colspan屬性指定它所占用的列數。例如，我們需要將“姓名”、“年齡”、“性別”三列合并為一列，那么代碼可以寫成：

<table>
<thead>
<tr>
<th colspan="3">基本信息</th>
<th>郵箱</th>
<th>手機</th>
</tr>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>23</td>
<td>男</td>
<td>zhangsan@qq.com</td>
<td>138********</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
<td>lisi@qq.com</td>
<td>139********</td>
</tr>
</tbody>
</table>

然后，在頁面加載完成后，調用ColumnGroup插件對表頭進行合并。具體代碼如下：

$(document).ready(function() {
$("#example").dataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }
],
"order": [[ 0, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
}
});
});

在這段代碼中，我們首先指定了需要進行合并的列號。在這里我們合并了第3列（也就是“性別”列）。然后，我們通過對相鄰行的比對，對相同的數據進行合并。最后，我們將合并后的行添加到表格中，然后通過樣式設置將其緊湊在一起。 總的來說，jquery datatable提供了靈活、方便的方式來進行表格操作和數據展示。通過使用ColumnGroup插件，我們可以輕松實現表頭合并的效果，提供更好的用戶體驗和頁面美觀度。