How to change specific jQuery dataTables cell value

Question

I have 2 HTML tables. Table 1, and Summary Table 2.

I use the following function to add or remove a checkmark in a cell in Table 1, and to then increment or decrement the relevant value in Summary Table 2.

function toggleCheckMark(elem, brand){

  var cell = $(elem).html();
  if(cell == ""){

    $(elem).html("&#x2714");

    var brandval = parseInt($("#" + brand).find("td:eq(3)").html());
    var newval = brandval + 1;
    $("#" + brand).find("td:eq(3)").html("" + newval + "");


  } else {

    $(elem).html("");

    var brandval = parseInt($("#" + brand).find("td:eq(3)").html());
    var newval = brandval - 1;
    $("#" + brand).find("td:eq(3)").html("" + newval + "");

  }

}

This works absolutely fine when Summary Table 2 is a bog standard html table. However when I used DataTables() on Summary Table 2. The value is undefined, and therefor cannot be changed.

How can I change my function so that it will work when my table is formatted by DataTables()?

EDIT

My HTML already includes empty <table id="rangereviewsummarytable"> tags and I use the following function to populate the summary table.

Here's a clickable cell:

rrtable += "<td class='checkboxcell' onClick=\"toggleCheckMark(this, '" + item.brand + "')\">&#x2714</td>";

And the function

function generateReviewSummary(summaryarray){

  var summarytable = "";

  $.each(summaryarray, function(brand, values){

    summarytable += "<tr id='" + brand +"''>"; //here is the logic behind $("#" + brand)...
    summarytable += "<td>" + brand + "</td>";
    summarytable += "<td>" + values.current + "</td>";
    summarytable += "<td>" + values.rec + "</td>";
    summarytable += "<td>" + values.user + "</td>"; // this is the col I want to update
    summarytable += "</tr>";

  });

  summarytable = "<tbody>" + summarytable + "</tbody>";

  $("#rangereviewsummarytable").append(summarytable);
  //$("#rangereviewsummarytable").DataTable();
  $("#rangereviewsummarypanel").show();

}

Show your code complete please!

CMedina
– CMedina

2016-03-22 17:41:04 +00:00
Commented Mar 22, 2016 at 17:41 — CMedina
– CMedina, Commented Mar 22, 2016 at 17:41

davidkonrad · Accepted Answer · 2016-03-23 00:54:13Z

3

Always use the API. You seem to want to update a specific column in a specific row - use the .cell().data() API method instead of jQuery .html()

var brandval = parseInt(summaryTable.cell({ row: 0, column: 2 }).data())
brandVal = !isNaN(brandVal) ? brandVal+1 : 1 //or -1
summaryTable.cell({ row: 0, column: 2 }).data(brandVal).draw()

I am referring to a summaryTable, the dataTable instance you must have since you have instantiated "Summary Table 2" somewhere :

var summaryTable = $("#" + brand).DataTable()

What the logic is behind $("#" + brand) I can only guess.

answered Mar 23, 2016 at 0:54

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Copley Over a year ago

Thanks for your answer. I have updated the question with more meaningful code regarding my table. The way which I identify a row is by assigning it's id as the name of the brand which it contains info for. There is also the issue that the cell i'm trying to update may not be on the active page in the table. would this cause a problem?

Collectives™ on Stack Overflow

How to change specific jQuery dataTables cell value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related