Obtain ID from table row selected

Question

I've got some trouble by getting the correct ID from the table row selected within Datatable. The alert I'm using to see what returns from the JS script only shows the same ID from the first row selected no matter how many rows are in the table list and of course ID from each is always different(from Mysql). Confusing. Even by refreshing is still the same. Must be a little bug there within my code. Any hint? Here it is:

PHP row output thru JSON encode:

$query = $mysqli->query($sql) or die;
        $data = array();
        // fetch data as array
            while($row = $query->fetch_array()) { 

                $nestedData=array(); 

                $nestedData[] = $row["email"];
                $nestedData[] = $row["ipv4"];
                $nestedData[] = $row["created"];
                // $nestedData[] = '<a class="delete" href="#"><i class="fa fa-trash-o"></i></a>';
                $nestedData[] = '<button type="button" class="delbtn btn btn-danger btn-xs" data-id="'.$row['id'].'">Delete</button>';
                $nestedData[] = '<a class="btn btn-info btn-xs" href="newsModal.php?id='.$row['id'].'" data-toggle="modal" data-target="#newsModal" edit-id="'.$row['id'].'">Edit</a>';

                $data[] = $nestedData;
    }

Jquery:

$('#delbtn').click( function () {
    if ( $('tr.selected').hasClass('selected') ) {
        var id = $('td button[type=button]').attr('data-id');
        var data = {'id': id };
        alert(id);
        // $.ajax({...

            <div class="panel-body">
            <button type="button" id="reloadbtn" class="btn btn-default">Refresh</button>
            <button type="button" id="printbtn" class="btn btn-primary">Print</button>
            <button type="button" id="delbtn" class="btn btn-danger">Delete</button>
        </div>

        <div class="panel-body">
            <div class="table-responsive">

          <table id="tablenews" class="display compact table table-striped table-bordered table-hover ">
            <thead>
                <tr>
                  <th>E-Mail</th>
                  <th>IPv4</th>
                  <th>Created</th>
                  <th></th>
                  <th></th>
                </tr>
          </thead>

table trouble JSfiddle

Answer 1

Perhaps this helps:

   $(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

    $('#button').click( function () {
        if ( $('tr.selected').hasClass('selected') ) {

      var id = $('tr.selected button.delbtn').attr('data-id');
      var data = 'id=' + id ;
      alert(id);

      // $.ajax({
                         // type: "POST",
                         // url: "newsdelrow.php",
                         // data: data,
                         // cache: false,
                         // success: function(response) { 


                         // alert(response);

                        // }
                    // });

        // table.row('.selected').remove().draw( false );

     }else { alert('Please select a table row first'); }

    } );

    $("#example tbody").on('click', '.delbtn', function(){

                var id = $(this).attr('data-id');
                var data = 'id=' + id ; //  var data = {'name': name } can be used instead

                 alert(id);

    });
} );

Answer 2

You can try like this:

     $('#button').click( function () {
        if ( $('tr.selected').hasClass('selected') ) {
          alert($('tr.selected button.delbtn').attr('data-id'));
        }
        else { 
          alert('Please select a table row first'); 
        }
     });