cant get data form the array in the right row of the table

dewilde

I have an array with data and i want to get the data in different columns.
Below is my setup in Datatables live (it doesnt work)

http://live.datatables.net/vijusad/4/edit

So my question is how do i get the data in different columns of the table.

allan

You'll only get two columns of data that way, but I presume that is what you want? It looks like the correct approach to me. Are you able to link me to a live test page that actually shows it in the error state?

Allan

dewilde

I have three columms and i want to get the url (example.com) in the same table as the other data.

I am afraid i can't give you a test page, the website is an internal website for my company.

dewilde

I kinda fixed it, i have the data from the array in the correct row of the tables

The only thing i want now is that the url comes in one of the table rows aswell

allan

So you want one of the columns generated by DataTables? You need to use columns.data to tell it to do that.

Allan

dewilde

Yes i have already done that with

"columns": [
            { "data": "0" },
            { "data": "" },
            { "data": "1" }
        ]

But now i want url (example.com) in the second column. Below is my array and datatable code.

Array:

{
    "example.com": [{
        "test_data": {
            "label": "Test Data",
            "data": [
                [20, 45],
                [21, 45],
                [22, 45],
                [23, 45],
                [24, 47],
                [25, 48],
                [26, 48],
                [27, 48],
                [28, 48],
                [29, 48]
            ]
        },

Datatable

$(document).ready(function() {
    $('#example1').dataTable( {
        "dom": 'frtip',
        "pagingType": "bootstrap",
        "language": {
        "zeroRecords": "No Data Found - Sorry!"
        },
        "iDisplayLength": 5,
        "ajax": {
            "url": "http://example.com/datafetcher/test/example",
            "dataSrc": "example-com.0.test.data"
        },
        "columns": [
              { "data": "0" },
              { "data": "" },
              { "data": "1" }
         ],
         "deferRender": true
    } );
} );

allan

Use columns.render as a function. You could use columns.data, but you'll find it much easier with columns.render. There are examples in the documentation.

Allan

dewilde

Thank you! Its fixed :)

dewilde

I have another question about this.

I have multiple datatables and a large array file with data.

How do i get test_data do be different? so in every datatable is different data

allan

I'm afraid I don't understand the question - are you making 3 ajax requests to different addresses, or just one and it contains three sources. If so, you'd be best off making a single Ajax call yourself and then using data to populate all three tables.

Allan

dewilde

Well let me explain it more with my array and datatable, you can see it both below.
This is the different data i have in a array. I have multiple datatables and i want all the data of the array displayed in the different datatables.

{
    "example-com": [{
        "direct_data1": {
            "label": "Direct Data 1",
            "data": [
                [20, 210],
                [21, 210],
                [22, 256],
                [23, 256],
                [24, 386],
                [25, 483],
                [26, 483],
                [27, 483],
                [28, 517],
                [29, 517]
            ]
        },
        "direct_data2": {
            "label": "Direct Data 2",
            "data": [
                [20, 223],
                [21, 223],
                [22, 269],
                [23, 269],
                [24, 398],
                [25, 494],
                [26, 494],
                [27, 494],
                [28, 529],
                [29, 529]
            ]
        },
        "desktop_data1": {
            "label": "Desktop Data 1",
            "data": [
                [20, 31180],
                [21, 36894],
                [22, 40895],
                [23, 30644],
                [24, 24692],
                [25, 24028],
                [26, 27478],
                [27, 26032],
                [28, 24582],
                [29, 24651]
            ]
        },
        "desktop_data2": {
            "label": "Desktop Data 2",
            "data": [
                [20, 7279],
                [21, 7994],
                [22, 7208],
                [23, 6112],
                [24, 5426],
                [25, 5172],
                [26, 5807],
                [27, 5498],
                [28, 5115],
                [29, 5124]
            ]
        },
        "mobile_data1": {
            "label": "Mobile Data 1",
            "data": [
                [20, 59],
                [21, 96],
                [22, 67],
                [23, 353],
                [24, 130],
                [25, 74],
                [26, 75],
                [27, 71],
                [28, 49],
                [29, 33]
            ]
        },
        "mobile_data2": {
            "label": "Mobile Data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 5],
                [24, 3],
                [25, 1],
                [26, 2],
                [27, 1],
                [28, 2],
                [29, 1]
            ]
        },
        "tablet_data1": {
            "label": "Tablet Data 1",
            "data": [
                [20, 136],
                [21, 208],
                [22, 198],
                [23, 122],
                [24, 159],
                [25, 144],
                [26, 160],
                [27, 142],
                [28, 141],
                [29, 140]
            ]
        },
        "tablet_data2": {
            "label": "Tablet Data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "facebook_data2": {
            "label": "Facebook Data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "facebook_data2": {
            "label": "Facebook Data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "twitter_data1": {
            "label": "Twitter Data 1",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "twitter_data2": {
            "label": "Twitter Data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "blog_data1": {
            "label": "Blog data 1",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        },
        "blog_data2": {
            "label": "Blog data 2",
            "data": [
                [20, 0],
                [21, 0],
                [22, 0],
                [23, 0],
                [24, 0],
                [25, 0],
                [26, 0],
                [27, 0],
                [28, 0],
                [29, 0]
            ]
        }
    }]
}

/*Data Table */

$(document).ready(function() {
    $('#example<?=$i?>').dataTable( {
        "dom": 'ftip',
        "pagingType": "bootstrap",
        "language": {
        "zeroRecords": "No Data Found - Sorry!"
        },
        "iDisplayLength": 5,
        "processing": true,
        //Add class to TD from table
        "fnDrawCallback": function(){
        $('td').addClass('ui-widget-content2')
        },
        "ajax": {
            "url": "http://example.com/datafetcher/test/" + $('#tabs li.active a').attr('rel'),
            "dataSrc": "example-com.0.direct_data1.data"
        },
        "columns": [
              { "data": "0" },
              { "render": function ( data ) {
                    return $('#tabs li.active a').attr('rel');}},
              { "data": "1" }
         ],
         "deferRender": true
    } );
} );