排序表每隔一行數據表

Question

我想排序我的數據與一個額外的行添加描述類型的數據，不需要排序。我不能隱藏/顯示此行，因爲它對其他數據有意義。

有沒有辦法用datatables做到這一點？

<table> 
    <tr> 
    <th>Rank Col</th> 
    <th>Power Col</th> 
    <th>Money Col</th> 
    </tr> 
    <tr> 
    <td colspan=3>Image - Name goes here</td> 
    </tr> 
    <tr> 
    <td>Rank</td> 
    <td>Power Level</td> 
    <td>Money</td> 
    </tr> 
    <tr> 
    <td colspan=3>Image - Name goes here</td> 
    </tr> 
    <tr> 
    <td>Rank</td> 
    <td>Power Level</td> 
    <td>Money</td> 
    </tr> 
    <tr> 
    <td colspan=3>Image - Name goes here</td> 
    </tr> 
    <tr> 
    <td>Rank</td> 
    <td>Power Level</td> 
    <td>Money</td> 
    </tr> 
    <tr> 
    <td colspan=3>Image - Name goes here</td> 
    </tr> 
    <tr> 
    <td>Rank</td> 
    <td>Power Level</td> 
    <td>Money</td> 
    </tr> 
</table> 

Answer 1

是的，DataTables確實支持您正在嘗試做的事情，但不會以您展示的方式支持。您需要將child elements添加到您的行中。一個簡單的方法在你的例子要做到這一點是利用隱藏的列（fiddle）：

的HTML

<table id="example" class="display"> 
    <thead> 
     <tr> 
     <th>Rank Col</th> 
     <th>Power Col</th> 
     <th>Money Col</th> 
     <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Rank</td> 
     <td>Power Level</td> 
     <td>Money</td> 
     <td>Image - Name goes here</td> 
     </tr> 
     <tr> 
     <td>Rank</td> 
     <td>Power Level</td> 
     <td>Money</td> 
     <td>Image - Name goes here</td> 
     </tr> 
     <tr> 
     <td>Rank</td> 
     <td>Power Level</td> 
     <td>Money</td> 
     <td>Image - Name goes here</td> 
     </tr> 
     <tr> 
     <td>Rank</td> 
     <td>Power Level</td> 
     <td>Money</td> 
     <td>Image - Name goes here</td> 
     </tr> 
    </tbody> 
</table> 

JavaScript的

function addChild (data) { 

    // data contains all of your information, 
    // e.g. data.rank, data.power_level, etc. 

    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
     '<tr>'+ 
      '<td colspan="3">' + data.description + '</td>'+ 
     '</tr>'+ 
    '</table>'; 
} 

var table = $('#example').DataTable({ 
    "columns": [ 
     { "data": "rank" }, 
     { "data": "power_level" }, 
     { "data": "money" }, 
     { "data": "description", "visible": false } 
    ] 
}); 

// Add children 
table.$('tbody tr').each(function() { 
    var row = table.row($(this)); 
    row.child(addChild(row.data())).show(); 
}); 

在上面的代碼，我們隱藏描述列並將子表附加到父錶行上。