How can I render a single column table with an array of objects using dataTables?

Question

I have a single column table that displays 10 results per page using datatables 1.9.4. The table is being populated by the dataTable ajax method. I can render one value per row but I will need to be able to render multiple values per row. (Think 1 row = 1 array in the json object.)

How can I take an array of objects and render that array of objects into a single column?

I've read up on column rendering and object arrays. I'm having no luck.

e.g.

A row, once rendered, would look like this:

<tr>
    <td>
        <a href="[email protected]" 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>

Here's what my data looks like (trimmed down):

{
    data: [
        {
            product_email: "[email protected]",
            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 protected]",
            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 protected]",
            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."
        }
    ]
}

Here is my call to 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);
    }
});

Hello @Dennis , if you just initialize the datatable in the normal way... $('#example').dataTable({"ajax": 'products.php'} ); ....did it draw the table correctly?? — Hackerman
– Hackerman, Commented Jun 18, 2014 at 16:42
@RobertRozas Nope, it yells at me: Uncaught TypeError: Cannot read property 'length' of undefined . I think it's yelling at me because it's expecting only an array, not an array of objects. — Dennis Martinez
– Dennis Martinez, Commented Jun 18, 2014 at 16:50
And this way: $('#yourTableID').dataTable({"ajax": 'products.php'}); ....and remember, your table have to have a thead and a tbody in order to work properly with dataTables :) — Hackerman
– Hackerman, Commented Jun 18, 2014 at 16:52
@RobertRozas Still yelling at me :(. Are you having luck with array of objects? If so mat I please see your structure of data? — Dennis Martinez
– Dennis Martinez, Commented Jun 18, 2014 at 16:54

Hackerman · Accepted Answer · 2014-06-18 17:23:18Z

3

You can try something like this:

$(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();   

});

Working fiddle: http://jsfiddle.net/robertrozas/3kPVT/4/

answered Jun 18, 2014 at 17:23

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dennis Martinez Over a year ago

This is very awesome! I did notice some things that were different between mine and yours, one being naming. I also had my array in the json file named "data" rather than "aaData." Thanks you very much for your help Robert.

Hackerman Over a year ago

No problem @DennisMartinez, it's been years using dataTables, so i know a few more tricks...feel free to ask anytime :)

Collectives™ on Stack Overflow

How can I render a single column table with an array of objects using dataTables?

1 Answer 1

Working fiddle: http://jsfiddle.net/robertrozas/3kPVT/4/

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working fiddle: http://jsfiddle.net/robertrozas/3kPVT/4/

2 Comments

Related