jQuery Datatables 是一個常用的數據顯示與操作的插件。它提供了許多便捷的操作接口，使得處理大量數據變得更為簡單和高效。其中一個常見的需求就是合并表格中相鄰單元格的內容，使得表格更加美觀、整潔，提高數據展示的可讀性。在 Datatables 中，我們可以通過自定義列的渲染方式來實現這個需求。 首先，我們需要擴展 Datatables 的自定義渲染方法。使用以下代碼：

// 自定義渲染方法：合并表格中相鄰單元格的內容
$.fn.dataTable.render.mergedCells = function (rows, columns) {
var last = {};
var rowspan = 1;
return function (data, type, row, meta) {
var rowKey = meta.row;
var colKey = meta.col;
if (typeof last[colKey] !== 'undefined' && last[colKey] === data) {
rowspan++;
rows[rowKey][colKey].rowspan = rowspan;
// 移除重復單元格
rows[rowKey][colKey].content = null;
return null;
}
// 初始化單元格信息
rowspan = 1;
last[colKey] = data;
rows[rowKey][colKey] = { rowspan: 1, content: data };
for (var j = 1; j< columns.length; j++) {
rows[rowKey][columns[j]] = { rowspan: 0, content: null };
}
return data;
};
};

上述代碼中，我們定義了一個自定義渲染方法 mergedCells，該方法接受兩個參數：rows 和 columns。rows 是一個二維數組，用于存儲表格中每個單元格的內容和行列合并信息，columns 是一個包含列索引的數組，表示需要合并的列。在執行 mergedCells 渲染函數時，我們會根據單元格內容來計算行列合并信息，并將結果存儲到 rows 數組中。最后返回單元格內容，使其在表格中顯示。 接下來，我們可以在 Datatables 的列定義中使用 mergedCells 渲染方法：

// Datatables 列定義
var columns = [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'salary' },
{
// 定義需要合并的列
data: 'start_date',
render: $.fn.dataTable.render.mergedCells(rows, [0, 1, 2, 3, 4]),
},
];

在上述代碼中，我們指定了需要合并的列為第 5 列（索引從 0 開始）。通過調用 mergedCells 方法并傳遞 rows 和需要合并的列索引數組，我們使得 Datatables 在渲染該列時會自動合并相鄰單元格的內容。 最后，我們需要在 Datatables 的初始化配置中設置 columns 選項：

// Datatables 初始化配置
var table = $('#example').DataTable({
data: dataSet,
columns: columns,
});

通過上述代碼，我們完成了 Datatables 合并列的操作。使用 mergedCells 自定義渲染函數，我們能夠快速地處理大量數據，并使其更加清晰、易于閱讀。