How to get the value of populated text input field in a data table column

Question

I have a data table that I populate text fields in a column for every row. I tried to get the value from these text fields but it always take the first column's text field value since as I assume id is always the same for every text field populated. How can I solve this issue ? Do I have to also populate dynamic id names for every text field ? I am getting the value with jQuery by the way.

With this piece of code:

var qty = $("#input").val();

And I am going to send this "qty" variable to a php code via an Ajax call. Ajax call is working fine, sending the variable, I have checked it so it is not the problem.

Table declaration code:

var table3 =  $("#last3").DataTable({

                                    "columnDefs": [
                                {
                                "targets": 4,
                                "data": null,
                                "defaultContent": '<input id="input" type="number"  value="" min="1" max="9"></input>'
                                },

                                {
                                "targets": 3,
                                "data": null,
                                "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
                                },

                                { "searchable": false, "targets": 0 } ],

                                select:false,

                                "scrollY": "32vh",
                                "scrollCollapse": true,
                                "paging": false,
                            });

EDIT 1: I have this piece of code, this dynamically create a cell value and increment it by one, so basically creates an index column. I just wonder is there a way to modify this so that instead of populating the cell.innerhtml, populates the "id" attribute somehow. so this way I would have unique id attr for each text field. (does not have to be id though, I can also get the value by "name" attr.)

table3.column(4, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {cell.innerHTML = i+1;}

Answer 1

You need to bind the button add after table draw, because of paging, searching etc. And as i sayied in comments, inside your iterator you have the cell param, you can search inside that to find your input, and then deal with it.

Maybe this help you:

$(document).ready(function() {


  var table3 = $("#last3").DataTable({

    "columnDefs": [{
        "targets": 4,
        "data": null,
        "defaultContent": '<input id="input" type="number" class="table-input"  value="" min="1" max="9"></input>'
      },

      {
        "targets": 3,
        "data": null,
        "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
      },

      {
        "searchable": false,
        "targets": 0
      }
    ],

    select: false,

    "scrollY": "32vh",
    "scrollCollapse": true,
    "paging": false,
  }).on('draw.dt', function() {
    $("#last3 tr").on("click", ".btn-add", function() {
      var data = table3.DataTable().row($(this).closest('tr')).data();
      console.log(data);
    })
  });


  table3.column(4, {
    search: 'applied',
    order: 'applied'
  }).nodes().each(function(cell, i) {
    var $input = $(cell).find('input');
    $input.attr({
      'id': ($input.attr('id') + i),
      'value': i
    });
  }).draw();;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>



<table id="last3" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
      <td>Row 1 Data 4</td>
      <td>Row 1 Data 5</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
      <td>Row 2 Data 4</td>
      <td>Row 2 Data 5</td>
    </tr>
    <tr>
      <td>Row 3 Data 1</td>
      <td>Row 3 Data 2</td>
      <td>Row 3 Data 3</td>
      <td>Row 3 Data 4</td>
      <td>Row 3 Data 5</td>
    </tr>
    <tr>
      <td>Row 4 Data 1</td>
      <td>Row 4 Data 2</td>
      <td>Row 4 Data 3</td>
      <td>Row 4 Data 4</td>
      <td>Row 4 Data 5</td>
    </tr>
  </tbody>
</table>