使用数据表进行非表格布局

Question

所以我想使用数据表，使每个“行”看起来像这样（或者至少具有这种通用结构）：

这里的参考是我用来创建的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>

无论如何，我如何通过数据表实现这一目标？在我看来，数据表返回一个<tr>，但我用来生成上面的HTML有一大堆<tr>。

我想使用数据表，因为它是ajaxified分页和搜索，并与本网站上的其他表格保持一致的外观。

Answer 1

您可以在数据表初始化代码中执行类似的操作（未经测试）：

'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这样的模板系统来使它更清洁。