Server side multidimensional array problem

Server side multidimensional array problem

yousefseyousefse Posts: 6Questions: 1Answers: 0
edited January 2018 in Free community support

In my database i have 2 arrays inside an array, i want to take the data from array ['p'] only,

{
    "t": [1516583407, 1516583707, 1516584007, 1516584307, 1516584606, 1516584907, 1516585206, 1516585506, 1516585807, 1516586107, 1516586407, 1516586707, 1516587007, 1516587307, 1516587608, 1516587908, 1516588206, 1516588506, 1516588807, 1516589106],
    "p": [0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492, 0.003492]
}
"}

I tried something like

{   "render": function ( data, type, row ) {
return     '<td class="performance-sparkline right-align" data-title="Performance 24h"><span values="'+row[2].p.join(',')+'"></span></td>';  },
                "targets": 2
            }

I also tried through the formatter with no luck, please help.

Thanks

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    It doesn't look like you have an array of arrays but an object with arrays. Start with this for your render function:

                      render: function ( data, type, row) {
                      return row.p.join(',');                }
                     }]
    

    In the render function you don't want to return <td> and you will need to use columns.createdCell to add classes, etc to the cells.

    Kevin

  • yousefseyousefse Posts: 6Questions: 1Answers: 0

    Thanks for your help,

    i tried the following
    return row[2].p.join(',');
    return data.p.join(',');

    i am getting an error : undefined is not an object.

  • allanallan Posts: 61,446Questions: 1Answers: 10,055 Site admin

    Did you try the exact code Kevin mentioned:

    return row.p.join(','); 
    

    That should return the p array as comma separated.

    If not, can you show us either a link to your page or the full data and configuration for your table pelase?

    Allan

  • yousefseyousefse Posts: 6Questions: 1Answers: 0

    Ya i did, please find the link : coinigraphy[dot]com/en-old/

    Also please find the configs below
    PHP File
    <?php
    $table = 'coin';

    $primaryKey = 'id';

    $columns = array(
    array( 'db' => 'logo', 'dt' => 0 ),
    array( 'db' => 'name', 'dt' => 1 ),
    array( 'db' => 'intraday_quotes', 'dt' => 2),
    array( 'db' => 'price', 'dt' => 3 ),
    array( 'db' => 'change', 'dt' => 4 ),
    array( 'db' => 'change_pct', 'dt' => 5 ),
    array( 'db' => 'open', 'dt' => 6 ),
    array( 'db' => 'low', 'dt' => 7 ),
    array( 'db' => 'high', 'dt' => 8 ),
    array( 'db' => 'supply', 'dt' => 9 ),
    array( 'db' => 'volume', 'dt' => 10 ),
    array( 'db' => 'volume_ccy', 'dt' => 11 ),
    array( 'db' => 'market_cap', 'dt' => 12 ),
    array( 'db' => 'last_updated', 'dt' => 13 ),
    array( 'db' => 'symbol', 'dt' => 14 ),
    );

    // SQL server connection information
    $sql_details = array(
    'user' => 'XXX',
    'pass' => 'XXX',
    'db' => 'XXX',
    'host' => 'localhost'
    );

    require( 'ssp.class.php' );
    

    echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
    );

    JS
    $(document).ready(function() {
    $('.server-side').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "js/tables/server_processing.php",

    "columnDefs": [
    { "render": function ( data, type, row ) {
    if (row[0] == null) {
    return '<a href="coin/' + row[14] + '"><img src="assets/images/favicon/favicon-32.png" alt="' + row[0] + '" title="' + row[0] + '"></a>';
    }else{
    return '<a href="coin/' + row[14] + '"><img src="assets/images/coins/thumb30/' + row[0] +'" alt="' + row[0] + '" title="' + row[0] + '"></a>';
    }
    },
    "targets": 0,
    },

            {   "render": function ( data, type, row ) {
                    return     '<a href="coin/' + data.p + '">' + data + '</a>';
                },
                "targets": 1
            },
    
            {   "render": function ( data, type, row) {
            return row.p.join(',');                                                                                 
    
                                    },
                "targets": 2
            },
            { "visible": false,  "targets": [ 13,14 ] },
        ]
    } );
    

    });

    Thanks

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Here is an example of your data:

        "data": [{
            "0": null,
            "1": "ROS Coin",
            "": "{\"t\":[1516630209,....,1516710609],\"p\":[0.0034923,...,0.0034923]}",
            "3": "0.0034923000",
            "4": "0.000000",
            "5": "0.00",
            "6": "0.0034923000",
            "7": "0.0034923000",
            "8": "0.0034923000",
            "9": "0",
            "10": "0.00",
            "11": "0.00",
            "12": "0.00",
            "13": "2018-01-23 12:30:10",
            "14": "ROS"
        }
    

    The data you want is contained in "" and is a JSON string. You will need to access that data using row[""] and use JSON.parse() to convert it from a JSON string. For example:

                   render: function (data, type, row) {
                     var jsonData = JSON.parse(row[""]);
                     console.log(jsonData);
                     if (!jsonData) {
                       jsonData = '';
                     } else {
                       jsonData = jsonData.p.join(',')
                     }
                     return jsonData;
                   }
    

    Kevin

  • yousefseyousefse Posts: 6Questions: 1Answers: 0
    edited January 2018

    It worked perfectly, thanks for your unmatched support Kevin and Allan. The data, classes and other attributes are in the right place, but unfortunately the sparklines is not showing yet, does data tables (server side) supports external js like sparklines?

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    edited January 2018 Answer ✓

    Interesting, I've not seen sparkline before. Looks like it might be useful for one of my projects. I built an example based on your data:

    http://live.datatables.net/sefuzuma/1/edit

    Had to eliminate the render function and move it to the rowCallback function. It seems when you execute sparkline() on the table it removes the data. With client side processing this is a problem because going back to a page causes a blank graph due to no html data. Using rowCallback fixes this.

    The drawCallback function runs the sparkline() function to display the graphs.

    Here is the sparkiline doc page for anyone interested:
    https://omnipotent.net/jquery.sparkline/#s-about

    Hope this helps to integrate into your site.

    Kevin

  • yousefseyousefse Posts: 6Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    When running the example its returning the below error

    Not sure, the example works fine for me.

    Kevin

  • yousefseyousefse Posts: 6Questions: 1Answers: 0
    edited January 2018

    Hi Kevin

    Well it seems the error was from Safari, anyway i implemented the code again and it worked perfectly, i really appreciate your quick support and desire to help thanks again.
    While the sparklines worked, the default sparklines design is not that good, so i want to share the design js code with you and any user that want to use it in the future. I added the below code:

    //invoke sparkline
    drawCallback: function () {
        $('.inlinesparkline').sparkline(
        'html', {
          type: 'line',
          lineColor: COLOR_CODE,
          fillColor: false,
          minSpotColor: false,
          maxSpotColor: false,
          spotColor: COLOR_CODE,
          highlightSpotColor: COLOR_CODE,
          spotRadius: 3,
          height: '2rem',
          width: '10rem',
          numberDigitGroupSep: THOUSANDS_SEPARATOR,
          numberDecimalMark: DECIMAL_POINT
        });
    

    instead of

    //invoke sparkline
    drawCallback: function () {
        $('.inlinesparkline').sparkline();
    

    After that the end result will look similar to:

    Which looks perfect with datatables.

    Thank you
    Yousef

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Nice, thanks! Updated the example: http://live.datatables.net/sefuzuma/3/edit

    Kevin

This discussion has been closed.