Altering a responsive table value in the mobile experience

northcutt

Link to test case: https://roi.fyi/crypto/
Debugger code (debug.datatables.net): no errors to debug
Error messages shown: no error
Description of problem:

Hi all,

I've got a table that's working like a dream, save for one issue.

When I try to run computations on a column of results and put them back using jQuery... it works! Right up until you collapse the responsive experience. It appears that the collapsed responsive cell stores data in a value named SPAN (dtr-data) beneath a LI and I'm not sure how to access it.

Is there possibly an API call or workaround for changing these cell values (after they go responsive) using some means other than locating it on the DOM and replacing? Because I'm not seeing a way to do that that's responsive-friendly.

Cheers.

kthorngren

You have a lot of code to look through. Maybe you can point out the code doing the calculations. My guess is you need to use something like column().data() to get the data instead of the methods you are currently using. Take a look at this example.

Kevin

northcutt

Thanks for the quick response, I'll give that call a look!

This is the function that does the updating.

function updatePricesTable(qty) {

    console.log("price table update triggered: " + qty);

    // Define valid durations
    let durationsLoop = ["24h", "7d", "30d", "1y"];

    // Update the table header
    jQuery('.qtyHeader').each((index, element) => {
        element.innerHTML = qty;
    });

    // Update prices table (loop rows)
    jQuery('table > tbody  > tr').each(function(index, tr) {

      // Calculate for each duration window (loop columns)
      for (let i = 0; i < durationsLoop.length; i++) {

        // Get cell contents
        var changeObj = jQuery(this).find('td[name='+durationsLoop[i]+'PctChange]');
        var change = changeObj.text();
        var valueObj = jQuery(this).find('td[name='+durationsLoop[i]+'ValueChange]');
        var value = valueObj.text();

        // isolate currency character
        currency = qty.slice(0, qty.search(/\d/));
        
        // Strip
        change = change.replaceAll("%","");
        change = change.replaceAll(",","");
        var cleanQty = qty.replaceAll(",","");
        cleanQty = cleanQty.replaceAll(currency,"");
        cleanQty = parseFloat(cleanQty);

        // Recalculate value
        var profit = (change / 100) * cleanQty;
        value = profit + cleanQty; // new value
        
        // Format
        value = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
        
        // Update table cell
        valueObj.text(currency + value);
      }
  });
}

kthorngren

It is best to use one of the Datatables data() API's (row().data(), cell().data() or column().data()) to get the table data instead of relying on jQuery or Javascript methods. Only the table data displayed on the page is in the DOM. The rest is accessible via Datatables APIs. You can also use the node() APIs if you need the element instead of the data. See the API docs for more details.

Kevin

northcutt

Very helpful, thank you!