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

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

dewildedewilde Posts: 9Questions: 0Answers: 0
edited May 2014 in DataTables 1.10

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.

Replies

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • dewildedewilde Posts: 9Questions: 0Answers: 0

    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.

  • dewildedewilde Posts: 9Questions: 0Answers: 0

    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

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

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

    Allan

  • dewildedewilde Posts: 9Questions: 0Answers: 0
    edited May 2014

    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
        } );
    } );
    
  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • dewildedewilde Posts: 9Questions: 0Answers: 0

    Thank you! Its fixed :)

  • dewildedewilde Posts: 9Questions: 0Answers: 0

    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

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • dewildedewilde Posts: 9Questions: 0Answers: 0
    edited May 2014

    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
        } );
    } );
    
This discussion has been closed.