Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  July 2023

  Because the DataTables doesn't know there's an input element in the cell, you need to get the node with cell().node(), and then access it via that. Here's a working example (edit the top line and press the button) - the important bit of code is this:

    let node = table.cell($('tbody tr:eq(0)'), 1).node();
    console.log($('input', node).val())
  

  Colin
• SatanFatalityz Posts: 10Questions: 2Answers: 0

  July 2023

  Would I then use closest to get just the row the button is click in? Otherwise would i have to code out each row that would be in the table?
• SatanFatalityz Posts: 10Questions: 2Answers: 0

  July 2023

  I am getting closer, just need some clarfication:

  How would i go about grabbing column TimeIn and TimeOut

  $('#tbledtchours tbody').on('change','td',function(){
    var timein=table.cell(this).nodes().to$().find('input').val();
    console.log(timein);
  });
  
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  July 2023

  Yes, you can use jQuery closest() to get the td and tr of the clicked button. You can pass the td into the cell() API. See the cell-selector docs for more options.

  For example:

  $('#example tbody').on('click', 'td > .btn', function () {
    var td = $(this).closest('td');
    console.log( $(table.cell(td).node()).text() );
  });
  

  Kevin
• SatanFatalityz Posts: 10Questions: 2Answers: 0

  July 2023

  I am having issue where when I click on the cell i get what's inside the input box, however when I click button I get nothing.

  var table=$('#tbledtchours').DataTable({
        destroy:true,
        paging:false,
        scrollY:300,
        searching:false,
        bInfo:false,
        ajax:{
          url:'http://localhost:8081/timescalealpha/src/php/adminfs.php?inactemp='+inactemp+'&curemp='+curemp+'&weekend='+weekend+'',
          dataSrc:''
        },
        columns:[
          {title:'TimeIn:',data:'TimeIn',
            mRender:function(data,type,row){
              return "<input class='timein' value='"+data+"'>"
            },
          },
          {title:'InCodeb:',data:'InCode'},
          {title:'TimeOut:',data:'TimeOut',
            mRender:function(data,type,row){
              return "<input class='timeout' value='"+data+"'>"
            },
          },
          {title:'OutCode:',data:'OutCode'},
          {title:'Hours:',data:'Hours'},
          {title:'Comments:',data:'Comments'},
          {title:'Save:',data:'ID',
            mRender:function(data,type,row){
              
              return "<button class='btn btn-primary btnsave' type='button'>Save</button>";
            },
          },
        ],
      });
  

  call function

      $('#tbledtchours tbody').on('click','td','.btnsave',function(){
        var timein=table.cell(this).nodes().to$().find('input').val();
        //var timeout=table.cell(this).nodes().to$().find('timeout').val();
        //var td=$(this).closest('td');
        //var timein=$(table.cell(td).node()).val();
        console.log(timein);
        //console.log(timeout);
      });
  
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  July 2023 edited July 2023

  Probably what you want to do is get the closest row. Use that along with the column index for the cell() API call. Like this:
  https://live.datatables.net/qiraqiko/1/edit

  If you still need help then please update my example with your code so we can help debug.

  Kevin