How do I define a data property for a column that is not from the ajax data source

metadev

I am trying to modify the original value from pst_no to a new value in the input tag

{ 
  title: "Old amount", 
  data: "pst_no"  // This is from server
},
{
  title: "New Amount",
  data: "pst_no", // I want to name this attribute to a custom name, not from the data source
  "render": function (data, type, row, meta) {
     if (type === 'display') {
       data = '<input id="newPostNo" type="number" value="' + data + '" />';
     }
     return data;
   }
}

Then, I am trying to obtain both values. Here is how I have tried so far

let arr = [];

let rows = $('tr.selected');
let newValue = $('tr.selected#newPostNo');
let rowData = myTable.rows(rows).data();
                
$.each($(rowData), function (key, value) {
  arr.push({ 
    old: value['pst_no'], 
    new: value[newValue]
  });
})

console.log(JSON.stringify(arr)); // This prints [{"old":"1"}]

I did try giving custom data like title: "New Amount", data: "new_pst", and getting it like new: value['new_pst'], but got undefined.

How do I solve this? Thanks for reading.

kthorngren

One problem is assigning id="newPostNo" to all the input elements. HTML specifies that the ID is to be unique on the page. Using $('tr.selected#newPostNo') will result in only the first found element.

one option is to update the Datatables data cache each time the input value is changed by using cell().data(). You can then use rows().every() to loop through all the selected rows by passing the row-selector of tr.selected. Something like this:
https://live.datatables.net/kituhaja/1/edit

Kevin

metadev

@kthorngren Thanks for the response. I might have to dig a little deeper into this.

metadev

@kthorngren Hey I did get to make this work but encountered a few issues using this method.
Eg, when I scrolled down below to edit an input, the screen jumps back to the top of the table which resulted in clicking unwanted input fields.

I tried another approach using checkboxes where I do the row selection using checkboxes. Demo link is provided below
https://live.datatables.net/zibeqane/1/edit

Here, I am trying to select the entire row based on checkbox selection (i.e add selected class upon checking checkbox). For now, the 'selected' class is added manually by adding it in the class of the <tr> directly in the DOM using browser console but it works in my local setup i.e when checkbox is selected, selected class is added automatically.

My problem is that upon clicking Submit, I am getting the old value (old salary value in this case). Why am I not getting the new value from the input?

kthorngren

when I scrolled down below to edit an input, the screen jumps back to the top of the table

I suspect the problem is with this from my example:

  //update the cell's data
  table.cell( cell ).data( val ).draw();

Use table.cell( cell ).data( val ).draw( false ); instead. Passing false to the draw() API will stay on the same page.

In your new test case you aren't updating the Datatables data cache so Datatables doesn't know about the changes. That is what the above statement is doing. You need to add the change event handler. You can remove the code that selects the row if you want.

Kevin

metadev

Thank you for the guidance.