直接看例子吧

<table id="example" class="display table table-bordered" cellspacing="0" width="600" style="margin-top: 50px"><thead><tr><th>Name</th><th>Position</th><th>Age</th></tr></thead> </table> var dataSet = [[ "Tiger Nixon", "Edinburgh",20,1 ],[ "Garrett Winters", "Tokyo",22,2],[ "Ashton Cox", "Tokyo",21,0 ]];$('#example').DataTable({data: dataSet,paging: true,searching:false, //搜索欄lengthChange : false, //是否允許改變每頁顯示的數據條數ordering:false,columnDefs: [{targets: 1,createdCell: function (td, cellData, rowData, row, col) {var rowspan = rowData[3];if (rowspan > 1) {$(td).attr('rowspan', rowspan)}if (rowspan == 0) {$(td).remove();}}}]});

說明一下：要實現rowspan/colspan這樣的特殊效果需要用到createdCell回調函數，此函數可配置在columns配置中,亦可配置在columnDefs中，此例采用columnDefs配置實現。具體原理是，在創建單元格cell的是否控制怎樣渲染，后臺需要定義好rowspan的值，這個需要后臺想辦法給出這個值。

?

后臺給出rowspan的思路：

將需要分組的屬性構造Map<key,count> map，遍歷list得到map,再遍歷list設置rowspan=map.get(key)，get過的key設置0再get, OK, ?搞定

?

具體實現：

http://www.cnblogs.com/hdwang/p/7169255.html

轉載于:https://www.cnblogs.com/hdwang/p/7115835.html

總結

以上是生活随笔為你收集整理的DataTables实现rowspan思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。