Server side multidimensional array problem

yousefse

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.

kthorngren

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

yousefse

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.

allan

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

yousefse

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

kthorngren

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

yousefse

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?

kthorngren

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

yousefse

Hi Kevin

When running the example its returning the below error

"http://live.datatables.net/runner:6:15
j@http://code.jquery.com/jquery-1.11.3.min.js:2:27314
fireWith@http://code.jquery.com/jquery-1.11.3.min.js:2:28123
ready@http://code.jquery.com/jquery-1.11.3.min.js:2:29967
J@http://code.jquery.com/jquery-1.11.3.min.js:2:30327
close@[native code]
http://live.datatables.net/js/prod/runner-3.17.11.min.js:1:13465
http://live.datatables.net/js/prod/runner-3.17.11.min.js:1:10515"

I also tried on my code and it returned another error. I am glad it will help you on your projects.

Have a great day

kthorngren

When running the example its returning the below error

Not sure, the example works fine for me.

Kevin

yousefse

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

kthorngren

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

Kevin