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

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

poisonspoisons Posts: 15Questions: 0Answers: 0

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')

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • poisonspoisons Posts: 15Questions: 0Answers: 0

    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

  • poisonspoisons Posts: 15Questions: 0Answers: 0
    edited June 2023

    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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • poisonspoisons Posts: 15Questions: 0Answers: 0

    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?

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

Sign In or Register to comment.