使用數據表的非表格佈局

所以我想用數據表使得每個「行」是這樣的（或至少具有這種基本結構）：使用數據表的非表格佈局

enter image description here

僅供參考這裏的HTML我用來創建：

<table border="1" cellspacing="1" cellpadding="1"> 
<tr> 
<td colspan="2">joe bob</td> 
</tr><tr> 
<td rowspan="4">pic</td> 
</tr><tr> 
<td>DOB: 1/1/1970</td> 
</tr><tr> 
<td>Gender: M</td> 
</tr><tr> 
<td>Phone: 111-111-1111</td> 
</tr> 
</table>

無論如何，我怎麼可以實現這與datatables？在我看來，datatables返回一個單一的<tr>，但我用來產生上述的HTML有一大堆<tr>的。

我想使用數據表進行分頁和查找，並與本網站上的其他表保持一致的外觀和感覺。

來源

2014-10-16 neubert

你可以做這樣的事情在你的數據表初始化代碼（未經測試）：你明確地定義行輸出

'aoColumns': [ 
    'mRender': function (data, type, full) { 
    return '<table border=\'1\' cellspacing=\'1\' cellpadding=\'1\'>' + 
    '<tr>' + 
    '<td colspan=\'2\'>' + full[0] +'</td>' + 
    '</tr><tr>' + 
    '<td rowspan=\'4\'>' + full[1] +'</td>' + 
    '</tr><tr>' + 
    '<td>DOB: ' + full[2] +'</td>' + 
    '</tr><tr>' + 
    '<td>Gender: ' + full[3] +'</td>' + 
    '</tr><tr>' + 
    '<td>Phone: ' + full[4] +'</td>' + 
    </tr>'; 
    </table> 
    }

這樣。這會在每個數據錶行中產生一個'內部'表，這可能不是你想要的。您可以使用css而不是表格來創建內部佈局，但這個想法是一樣的。你可以使用像jsRender這樣的模板系統來使它更清潔一些。

來源

2014-10-17 09:13:44 markpsmith

使用數據表的非表格佈局

回答

相關問題