cell().data() set value for a rendered cell

poisons

I've this datatable, 2 columns, the first is plain text, while I render the cell in the second column with an input field.

let tableProduction = $('#productionList').DataTable({
    dom: '<"row"<"col-sm-12"f>><"table-responsive"t>',
    columns: [
      null,
      {
        data: null,
        render: function (data, type, row, meta) {
          return "<input type='number' value='" + data + "'>";
        }
      }
    ]
  });

When I click on a button, I would like to update the value of the first column and the value of the input field with a certain value, for a given rowId ( diferent from row index)

tableProduction.cell('#'+rowId, 0).data(10));
tableProduction.cell('#'+rowId, 1).data(11));

This update the cell value and call the render function.
The first column update flawlessy. The second doesn't change.
If I console.log() the data in the render function, it is an object with the values of both columns, [10, 0] in which the first value is the updated one, the second remain as the default value of the input field (should be updated to '11')

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

poisons

Yes Colin, I know the forum rules, but this is a very simple and generic case, on how a method works. I'm just asking if what I do is correct and the result is exactly what expected

poisons

Anyway, here's the test case:
https://live.datatables.net/sicawevo/1/edit?html,js,output

If you change the numbers in the two input field, it should create a row for the product (if doesn't exist) or updte the existing row.
Basically you input the number of products, it returns the number of bags you can fill (given the qty per bag) and the spare ones. But the input field doesn't update

allan

cell().data() doesn't know anything about the input element in the field - it just treats the contents as an HTML string, and since the value of the input element is a property, it isn't reflected in the HTML that would be returned.

You need to use cell().node() to get the td element and then get/set the value from the input element - e.g.:

let td = tableProduction.cell('#'+rowId, 1).node();
let input = $('input', td);

input.val(howManyBags(qtyTotal, qtyBag, 'spare'));

The problem with this method is that DataTables doesn't see the value of the input for sorting of filtering either - so you can change the input value and it wouldn't be reflected in those actions.

Typically I try to avoid using input elements in the table cells for these reasons.

Regards,
Allan

poisons

I see Allan, thanks for your answer. The use of the input is because I need to change the value, if needed. Do you suggest to use the edit extension?

allan

The closest is something like this. Basically you would need to have an event handler for your input element that would then trigger the Editor API to reflect the change.

Allan