Answers

• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  March 2017 edited March 2017

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

  Kevin
• vibajajo64 Posts: 6Questions: 2Answers: 0

  March 2017

  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 Posts: 21,364Questions: 26Answers: 4,956

  March 2017 Answer ✓

  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 Posts: 6Questions: 2Answers: 0

  March 2017

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