在網(wǎng)頁前端開發(fā)中，數(shù)據(jù)表格是一個非常常見的元素。jquery datatables 是一個非常強(qiáng)大的用來處理數(shù)據(jù)表格的插件，其功能非常豐富，可以滿足開發(fā)者對于數(shù)據(jù)表格的絕大部分需求。其中最為常用的功能之一，就是合并表格中相鄰的相同行。

要實現(xiàn)表格行的合并，我們需要使用 datatables 中提供的 rowGroup 插件。這個插件可以根據(jù)指定的列，將相鄰的具有相同值的行進(jìn)行合并，并且可以設(shè)置每個合并后的單元格中的內(nèi)容為原來被合并掉的行的任意屬性或方法的返回值。

//指定要使用 rowGroup 的列
$('#myTable').DataTable({
"rowGroup": {
"dataSrc": "country"
}
});

在默認(rèn)情況下，rowGroup 插件會將被合并掉的行的單元格賦上相應(yīng)的 rowspan 屬性值，以便在表格中展示效果。但是，有時候我們需要在合并后的單元格中加入一些其它的元素，比如按鈕、鏈接等，此時就需要使用 rowGroup 數(shù)據(jù)源中的自定義返回值來實現(xiàn)該功能。

//將合并后的單元格設(shè)為第一個被合并行的國家名字+該國家的總出貨量
$('#myTable').DataTable({
"rowGroup": {
"dataSrc": "country",
"startRender": function(rows, group){
var total = rows.data().pluck('ship').reduce(function(a, b){
return a+b;
}, 0);
return group + ' (Total shipped: '+total+')';
}
}
});

有了 rowGroup 插件的支持，實現(xiàn)表格行的合并變得非常簡單。開發(fā)者只需要指定要使用 rowGroup 插件的列，并在需要的時候自定義返回值就可以了。當(dāng)然，還有很多其它的定制化選項可以使用，讓開發(fā)者能夠更加靈活地控制表格的行為。