1. 程式人生 > >DataTables實現rowspan思路

DataTables實現rowspan思路

wid cti name code border cells var () 渲染

直接看例子吧

<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回調函數,此函數可配置在column.render配置中,亦可配置在columnDefs中,此例采用columnDefs配置實現。具體原理是,在創建單元格cell的是否控制怎樣渲染,後臺需要定義好rowspan的值,這個需要後臺想辦法給出這個值。

DataTables實現rowspan思路