Datatables what is the best approach?

PWH

I am new to Datatables/js etc and have no training in this. It's a hobby. So far, I have 2 HTML pages that calls 1 main.js file from which I can call the functions to produce 2 tables from 2 API's as offered. What I want to do, is combine parts of one api with another to produce the table layout I want. I have found out that if you load onr table then switch HTML pages, the main.js is read from the start so you lose the content of global variables. I have tried to get round this by using this code provided by Allan on another thread

var data = [];
 
table.rows().every( function () {
  data.push( table.cells( this, [ 0, 1, 2 ] ).data().toArray() );
} );

but that does not seem to store the array in a format that can be accessed ( no [] or {} bits, probably the way I am using it)
I have also tried HTML localStore, sessionStore, but again I can't access the data although I can see it in console.log.
The best I have managed so far is to get an entire array into one column rather than just the one item.
I am thinking maybe I should split up the main.js file for use by each HTML page? Later, I may add more pages so before going down this route I thought I would ask what 'best practice' is from a datatables perspective to combine and access multiple api's on one HTML page and if there is an example that can be pointed to.

Thank you.

allan

Hi,

You might be over complicating things a little bit. Could you say what the table layout is that you want to achieve on the two pages and I'll try to suggest how it might be done.

Allan

PWH

Hi Allan,
API 1 has this format (examples from their website), 2 columns wide

{"success":true,
"balances":{
"BTC":"13.00419483",
"XMR":"396.93688709",
"LTC":"2.00000000",
"SUMO":"1.00000000",
//etc etc
}} 

API 2 has a different format and information

[{"BTC-AEON":{"initialprice":"0.00022004","price":"0.00025992","high":"0.00025992","low":"0.00022003","volume":"0.00359066","bid":"0.00022456","ask":"0.00025993"}},
{"BTC-BTCP":{"initialprice":"0.00300573","price":"0.00325000","high":"0.00379000","low":"0.00300010","volume":"0.04753022","bid":"0.00300099","ask":"0.00325000"}},
{"BTCBTN":{"initialprice":"0.00000032","price":"0.00000033","high":"0.00000033","low":"0.00000028","volume":"0.01306734","bid":"0.00000027","ask":"0.00000033"}},{"BTC-CIV":{"initialprice":"0.00032127","price":"0.00026700","high":"0.00032127","low":"0.00026700","volume":"0.73182101","bid":"0.00026700","ask":"0.00029000"}},{"BTC-COAL":{"initialprice":"0.00000289","price":"0.00000330","high":"0.00000330","low":"0.00000288","volume":"0.00297381","bid":"0.00000289","ask":"0.00000345"}},{"BTC-DASH":{"initialprice":"0.04699999","price":"0.05757790","high":"0.05757790","low":"0.04699999","volume":"0.00322117","bid":"0.04880001","ask":"0.05757750"}},
// blah blah
}]

I can call and display either of these in datatables in their respective tables .
What I am trying to do is take "price: ??????? " from API2 , add it to a 3rd column in API 1 table (note they are not sorted the same so don't align to their respective pair) so I can produce 'balance * price' in each cell to give a result.
I hope that makes sense!
Thank you

kthorngren

Its not clear from the above but is there something in the API 1 data that can be used to reference the proper data in API 2 to get the price?

Is this static data or are you continually fetching it?

One option might be to build a global variable containing the name and price, for example:

{
  "BTC-AEON": "0.00025992",
  "BTC-BTCP": "0.00325000",
  ....
}

Then use columns.render in the third column of API 1 to get the price from the global variable using the row parameter of the columns.render function.

Please provide more specific about your datatables config. Better yet please provide a link to your page or a simple test case so we can see what you have.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

PWH

Thanks Kevin for the reply.
I'll have a go at uploading a test case, which may take me some time!.

Is this static data or are you continually fetching it?
At the moment, API 2 is fetched and API 1 is from a text file.
is there something in the API 1 data that can be used to reference the proper data in API 2 to get the price.
Only the sub string of "BTC-AEON" - (AEON, BTCP etc).
I did try the global variable option but when I switched HTML pages, I lost the contents, it went back to default.
Thank you all again for your time.

kthorngren

I did try the global variable option but when I switched HTML pages, I lost the contents, it went back to default.

You may need to fetch the data again when changing pages. You can have multiple Datatables on a page or just store the fetched data in a global variable.

Kevin

PWH

I think I have done it. Col 3 isn't being calculated but it does locally.
http://live.datatables.net/jofuhaca/1/edit?css,js,console,output

You may need to fetch the data again when changing pages

Yes that may be the best approach?

Thanks

PWH

I have tried but still cannot get this to work. I have managed to create a function called 'initialise' which extracts the price data and the name of the coin it belongs to. It is supposed to be stored in a global variable called Cprice but that does not seem to remain set. My code is
http://live.datatables.net/jofuhaca/2/edit?html,css,js,console,output
The idea being, once the data is stored, I can add it to the API1 format above so it looks like this ( an extra column is added)

{"success":true,
"balances":{
"BTC":"13.00419483", "0.00001234"
"XMR":"396.93688709", 0.00005678"
//etc etc
}} 

Then I will be able to create my table. I am sure it is something simple.Any help would be appreciated. If there is an easier way to achieve this again, please let me know
Thank you

allan

What does balances.txt contain please? http://live.datatables.net/jofuhaca/3/edit shows it executing the code without the initialisation error, but it can't load that file.

Allan

PWH

Hi Allan, thanks for the reply

What does balances.txt contain please?

It contains API 1, format below , just more of it. I can't authenticate without a server apparently, so I download it with curl instead and save it to a file. (the values here are random!).

{"success":true,
"balances":{
"BTC":"0.00000003",
"XMR":"0.00000009",
"LTC":"0.00000000",
"SUMO":"1.00000000",
//etc etc
}} 

allan

If I make a little change to use that data locally rather than via Ajax it appears to work: http://live.datatables.net/jofuhaca/5/edit . Is that what you would expect as the output for that table?

Allan

PWH

Hi Allan,
Thank you for your time and patience.
No the result is not what I am after. I spent some more time yesterday with your code and the result is here http://live.datatables.net/jofuhaca/6/edit?html,css,js,console,output
I also tweaked the titles in HTML so it is hopefully cleared what I am expecting. In the first row, ACM is 3, the price in satoshi retuned by 'initialise()' is 0.00000299 (or thereabouts, it changes) so the result in the value in satoshi column should be 0.00000897 but the 0.00000299 is not being saved to the global variable. Strange because the BTCvalue which is a global, is set. I note the JavaScript has a missing ; error but I don't see where it should go? that may be the cause?
Thank you

kthorngren

The main problem you are running into is Ajax is an async process. The Cprice variable is not populated by the time you are initializing the data for Datatables. You need to move your function calls into the Ajax success functions to have them run in the proper order. See the updated example:
http://live.datatables.net/jofuhaca/7/edit

I removed async: false in your first Ajax call. I also changed Cprice to be an object instead of array. This way you can access the array using the coin name.

I'll leave the number formatting to you. Take a look at the Data Renderers docs. Note the values in your data are strings not numbers so you may need to convert them for conversion and/or sorting to work correctly. Let us know if you have questions about formatting the numbers.

Kevin

PWH

Yay! Thank you so much. I would never have worked that out.
I'll have a go at the formatting..

PWH

Formatting
I have 4 columns and the structure in console.log is

5: (4) […]
     ​​0: "ACM"                                       //String?
     1: "3.00000000"                           //String?
     2:  0.00000270                            //Number
     3: 8.195062727640631e-18        //Number
length: 4
​​

Using this code

var table = $('#balances').dataTable( {
        
        columns: [
        { 'data ' : '' },
        { 'data ' : "" },
        { 'data ' : "", render: $.fn.dataTable.render.number('', '.', 8, '') },
        { 'data ' : "", render: $.fn.dataTable.render.number('', '.', 8, '') }
        ],
        "ajax": {
            "url": "balances.txt",      // Load the TXT file
            "dataSrc": function (data) {
                var result = [];
                for(var coin in data.balances){
                    var coinName = 'BTC-' + coin;
                    result.push([coin,                                          // Coin                                   
                    data.balances[coin],                                        // Balance    
                    data.balances[coin] * Cprice[coinName],                     // Value in Satoshi
                    [(data.balances[coin] * Cprice[coinName]) / spotRate]] );       // Value in $, right answer wrong format
                    //(data.balances[coin] * Cprice[coinName]) / spotRate ]);   // Value in $, right format wrong answer
                }      
                console.log(result);
                return result;
            }   
        }
        
    });

The first three columns are formatted correctly, but column 4 does not format (expecting 8.19000000). if I enclose line 18 in [] I get the right answer but no formatting! What am I doing wrong?

I have uploaded what I have done as far as I can but I can't get the columns[] bit above to work in the link.
http://live.datatables.net/jofuhaca/8/edit
Thank you for your help

kthorngren

Not sure I understand the exact problem. I added the columns option to your test case and removed the [] from column 4. I'm not sure the numbers in the test case are the same as you are working with your test environment. I changed column 4 to use toFixed(20) and the numbers seem very small.
http://live.datatables.net/jofuhaca/11/edit

Let me know if I'm missing something.

Kevin

PWH

Thanks Kevin
I am an idiot! If I get the arithmetic right, It works correctly.

(data.balances[coin] * Cprice[coinName]) * spotRate] )

Thanks again for your help