我有一个列表,每页显示10个结果,使用数据表1.9.4。该表由dataTable ajax方法填充。我可以每行渲染一个值,但我需要能够每行渲染多个值。 (在json对象中认为1行= 1个数组。)
如何获取一组对象并将该对象数组渲染到一列中?
我已阅读column rendering和object arrays。我没有运气。
e.g。
一行,一旦渲染,将如下所示:
<tr>
<td>
<a href="email@email.com" class="mail">Email Product</a> <!-- this would come from product_email -->
<h3><a href="#">Product1</a></h3> <!-- this would come from product_name -->
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed.</p> <!-- this would come from product_description -->
</td>
</tr>
这是我的数据的样子(裁剪):
{
data: [
{
product_email: "email@email.com",
product_name: "Product1",
priduct_description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed."
},
{
product_email: "email@email.com",
product_name: "Product2",
priduct_description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed."
},
{
product_email: "email@email.com",
product_name: "Product3",
priduct_description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed."
}
]
}
这是我对dataTables的调用
this.$el.find('table').dataTable({
sDom: '<"top">rt<"bottom"<"showing"i><"product-length"l><"product-pagination unlist horizontal"p>><"clear">',
sPaginationType: 'full_numbers',
oLanguage: {
oPaginate: {
sFirst: '<<',
sLast: '>>',
sNext: '>',
sPrevious: '<'
}
},
bProcessing: true,
bServerSide: true,
sAjaxSource: 'products.php',
/*columns: [
{ data: '[]' }
],*/
fnServerData: function(sSource, aoData, fnCallback) {
console.log(sSource, aoData, fnCallback);
}
});
答案 0 :(得分:3)
您可以尝试这样的事情:
$(document).ready(function(){
$("#Tabla").html("<thead><tr><td>Email</td><td>Name</td><td>Action</td></tr></thead><tbody></tbody>");
$("#Tabla").dataTable({
"aaData": arreglo,
"aoColumns": [
{ "mData": "product_email" },
{ "mData": "product_name" },
{
"mData": null,
"mRender": function (data, type, full) {
var nombre = full.product_email ;
var a2 = '<h3><a href="#">'+full.product_name+'</a></h3>';
var desc = '<p class="description">'+full.priduct_description+'</d>';
return '<a href="'+nombre+'" class="mail">Email Product</a> ' + a2 + desc;
}
}
],
"bDestroy": true
}).fnDraw();
});