如何使用dataTables使用对象数组呈现单个列表?

时间:2014-06-18 16:15:21

标签: jquery datatables jquery-datatables

我有一个列表,每页显示10个结果,使用数据表1.9.4。该表由dataTable ajax方法填充。我可以每行渲染一个值,但我需要能够每行渲染多个值。 (在json对象中认为1行= 1个数组。)

如何获取一组对象并将该对象数组渲染到一列中?

我已阅读column renderingobject 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);
    }
});

1 个答案:

答案 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();   

});

工作小提琴:http://jsfiddle.net/robertrozas/3kPVT/4/