Sorting and Searching functions not working

vibajajo64

Hi, I came across an interesting codepen made by someone which incorporates DataTables. Using the coincap api, https://github.com/CoinCapDev/CoinCap.io , various information such as Price, Name, ID are being extracted into the table. If you look at the codepen, you will see that it looks like the columns have a sorting and a search function, however neither is working. It gives a message, "No data available in table" even though all the data does show up. I fooled around quite a while with the javascript but couldn't get it to sort or search. Can anyone point me in the right direction how to get this working? Here is the link to the codepen. http://codepen.io/nepalbitcoin/pen/XjYXmZ

Thanks so much!

kthorngren

You need to use row.add to add the array to the table instead of directly to the dom.

Kevin

vibajajo64

Appreciate the reply. The examples given for row.add API seemed to be a little different than the code I'm working with. I'm pretty much a novice at this so I'd probably need more guidance than I thought on exactly what code lines to change. I understand if it's too much trouble. Thanks

kthorngren

Here is the approach I would take:

It looks like the code will add a new row if the value tradeMsg.message.coin does not already exist in one of the rows, otherwise it updates the tradeMsg.message.coin row. The value tradeMsg.message.coin is not displayed. I would add a new column to the table for this value and hide it with DataTables.

New column called coin:

    <tr>
      <th>coin</th>
      <th>#</th>
      <th>Name (Symbol)</th>
      <th>Price (रु)</th>
      <th>Volume(रु/24h)</th>
      <th>Market Cap (रु)</th>
      <th>Supply</th>
      <th>24h</th>
      <th>रु.1</th>
    </tr>

Your table initialization would like like this:

    $('#table').DataTable({
      columnDefs: [
        { targets: 0, visible: false},
      ],
      order: [[1, 'asc']],
    });

This hides column 0 (coin) and defaults to sorting column 1 (#).

Your socket.on function needs to be changed by removing the html manipulation and replacing it with DataTables code to see if the new data belongs to an existing row and updating it or adding a new row. See inline comments.

socket.on('trades', function(tradeMsg) {
  var table = $('#table').DataTable();      // save the DT API instance in table
  var msgx = tradeMsg.message.msg;
  var Price = msgx.price * USDNPR;

var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {    //check column 0 of each row for tradeMsg.message.coin
    return table.cell( rowIdx, 0 ).data() === tradeMsg.message.coin ? true : false;
} );
  if (indexes.length > 0) {     // if it exists use that index to update the row
    table.row(indexes).data([tradeMsg.message.coin, msgx.position24, msgx.long + ' (' + msgx.short + ')@', Price.toFixed(Price < 1 ? 8 : 2), (msgx.volume * USDNPR).toFixed(0), (msgx.mktcap * USDNPR).toFixed(0), msgx.supply + ' ' + msgx.short, msgx.cap24hrChange, (1 / Price).toFixed((1 / Price) < 1 ? 8 : 2) + ' ' + msgx.short]);
  } else {  // if it doesn't exist add the row
    var coin = table.row.add( [tradeMsg.message.coin, msgx.position24, msgx.long + ' (' + msgx.short + ')', Price.toFixed(Price < 1 ? 8 : 2), (msgx.volume * USDNPR).toFixed(0), (msgx.mktcap * USDNPR).toFixed(0), msgx.supply + ' ' + msgx.short, msgx.cap24hrChange, (1 / Price).toFixed((1 / Price) < 1 ? 8 : 2) + ' ' + msgx.short])
    .draw(false);
  }
});

Review these docs:
columnDefs
order
rows
row().data
cell
cell().data

This should give you a base to start from.

Kevin

vibajajo64

Kevin, That works perfect. I'm amazed how you were able to code that. So happy!!!!