了解具有响应数据表的选定行

Question

I have a problem with responsive datatables . When I resize the window and button was hidden this code, used to know which row is selected, doesn't work:

$('#usersTable tbody').on( 'click', 'button', function () {
        usernameSelected = (userTable.row( $(this).parents('tr') ).data().username);
    } );

Maybe the problem is on parents('tr'), but how can I get information when table was resized? I use the returned value to recognize the button of which row is clicked. My table use ajax call like this:

if ( ! $.fn.DataTable.isDataTable( '#licensesTable' ) ) {
    licenseTable = $('#licensesTable').DataTable({
        responsive: true,
        //disable order and search on column
        columnDefs: [
             {
                 targets: [4,5],
                 orderable: false,
                 searchable: false,
             }
         ],
         //fix problem with responsive table
         "autoWidth": false,
         "ajax": "table",
         "columns": [
             { "data": "user" },
             { "data": "startDate",
                 "render": function (data) {
                     return (moment(data).format("DD/MM/YYYY"));                     
                 }
             },
             { "data": "endDate",
                 "render": function (data) {
                     return (moment(data).format("DD/MM/YYYY"));                     
                 }
             },
             { "data": "counter" },
             { data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-primary" id="updadteLicense" data-toggle="modal"'
                 +'data-target="#updateLicenseModal">Update</button>'

             }
             },
             { data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal"'
                 +'data-target="#deleteLicenseModal">Delete</button>'                                   
             }
             }
        ],
    });
}
else {
    licenseTable.ajax.url("table").load();
}

This is the HTML code relative datatable:

<table id="licensesTable"
class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>User</th>
            <th>Start date</th>
            <th>Expire date</th>
            <th>Max execution</th>
            <th>Delete</th>
            <th>Update</th>
        </tr>
    </thead>
</table>

Answer 1

I dont know if this is a good way, but i solved it by adding id to the button.

in Laravel

   ->addColumn('Datalist',function($loadData){
      return '<center><button id='.$loadData->rowID.' type="button" class="btn-showdata"><i class="fa fa-list"></i></button></center>'; 
   })

in javascript:

$(this).on('click','#tableid .btn-showdata',function(){
  console.log(this.id);
});