Altering a responsive table value in the mobile experience

Altering a responsive table value in the mobile experience

northcuttnorthcutt Posts: 9Questions: 2Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • northcuttnorthcutt Posts: 9Questions: 2Answers: 0
    edited May 2022

    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);
          }
      });
    }
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited May 2022 Answer ✓

    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

  • northcuttnorthcutt Posts: 9Questions: 2Answers: 0

    Very helpful, thank you!

Sign In or Register to comment.