datable rows().every and this.nodes() incompatibility with datatable 2?

miguelaguilar

Link to test case:
This works with datatable 1.13.X -> https://live.datatables.net/mexezomi/2/edit
The same code but running on datatable 2.0.X, doesn't work -> https://live.datatables.net/waqunabe/2/edit

Error messages shown:
"TypeError: this.nodes is not a function ...

Description of problem:
I have this table that rows can be added dynamically and every row have input for the user put some values, and finally I get this data with the datatable API functions as rows.every(), then I get the inputs with this.nodes().to$().find("input").
When I upgrade datatables to version 2 this stoped working getting an error.
Do you have any suggestion to improve this code and make it compatible with datatable 2?
Thank You!!

var table = new DataTable("#example",{
  paging:false,
  columns: [
    {
      "data":null,
      "title": "A",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueA' name='A' id='id_a'>";
      }
    },
    {
      "data":null,
      "title": "B",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueB' name='B' id='id_b'>";
      }
    },
    {
      "data":null,
      "title": "C",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueC' name='C' id='id_b'>";
      }
    }
    ,
    {
      "data":null,
      "title": "<button id='add_row'>add+</button>",
      "defaultContent" : ""
    }
  ],
  data: [{},{}]
});

table.off("click").on("click", "#add_row", function(){
  table.row.add({});
  table.draw();
});

function saveValues(){
  let arrValues = [];
  table.rows().every(function (rowIdx, tableLoop, rowLoop){
    // this.nodes() doesnt work with datatables 2.x.x
    let cells = this.nodes().to$().find("input"); 
    
    let data = '{';
    for (const cell of cells){
      data += `"${cell.name}" : "${cell.value}",`;
    }
    data = data.slice(0,-1);
    data += '}';
    data = JSON.parse(data);       
    arrValues.push(data);
  });
  console.log(arrValues);
}

kthorngren

I've seen this asked before. With rows().every() the this value is a single row which is equivalent to row(). The API doesn't have a row().nodes() API. It has row().node() and rows().nodes(). In DT 1.x row().nodes() did work but was a bug. DT 2.0 has changed this.

You will need to use this syntax:

let cells = $( this.node() ).find("input"); 

Updated example:
https://live.datatables.net/kafiwede/1/edit

Kevin

miguelaguilar

Hey Kevin thank you very much, this was very helpful.

allan

Excellent spotting Kevin - nice concise write up!

I swear you might know more about DataTables than me

Allan

kthorngren

I swear you might know more about DataTables than me

I've learned a few things from your posts

Kevin