Fetch data in a selected table row

The Table:

PHP Code:

<table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Code</th>
 <th>General Description</th>
 <th>Unit</th>
 <th>Quantity</th>
 <th>Estimated Budget</th>
 <th>Mode of Procurement</th>
 <th>Actions</th>
 </tr>
 </thead>
 <tbody>
 <?php foreach ($items as $item): ?>
 <tr data-id="<?= $item->id ?>">
 <td><?= $item->id; ?></td>
 <td><?= $item->description; ?></td>
 <td><?= $item->unit; ?></td>
 <td><?= $item->quantity; ?></td>
 <td><?= $item->budget; ?></td>
 <td><?= $item->mode; ?></td>
 <td>
 <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-pencil"></i></button>
 <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-remove"></i></button>
 </td>
 </tr>
 <?php endforeach; ?>
 </tbody>
 <tfoot>
 <td colspan="3"></td>
 <td>Total</td>
 <td></td>
 </tfoot>
</table> 


data- is a custom attribute. I added data-id to the tr.

Code:

"edit": {
name: "Edit",
icon: "fa-pencil-square-o",
callback: function (itemKey, options) {
               var id = $(this).closest('tr').data('id');
               edit_item(id);
}
}
}

if you delete an item, you do not need to reload.
You can use .closest('tr').remove()

eg.

Code:

$( "#ppmpsupplies tbody" ).on( "click", "tr button.btn-danger", function() {
   alert($(this).closest('tr').data('id'));
   $(this).closest('tr').remove();
});

or

Code:

/*
onclick="delete_item(this,<?php echo $item->id; ?>)"
*/
function delete_item(element, id) {
   alert($(element).closest('tr').data('id'));
   $(element).closest('tr').remove();
}

The ajax code is necessary. the example should show how to use closest and remove

---

https://www.codeigniter.com/user_guide/g...e_php.html <- read it

Sir, 

I got an error undefined. When I try the delete function. I try fixing but still I got that error. I already remove the button I just wanted to used the context menu.

Code:

"delete": {
                           name: "Delete",
                           icon: "fa-trash-o",
                           callback: function(item, id) {
                              var id = $(this).closest('tr').data('id');
                               delete_item(id);
                               return true;
                           }
                       },

Code:

function delete_item(element, id) {
       // if(confirm('Are you sure delete this data?'))
       // if(toastr.success('successfully deleted :)', 'Success Alert', {timeOut: 5000}))
       alert($(element).closest('tr').data('id'));
       $(element).closest('tr').remove();
       {
         
           $.ajax({
               url: "<?php echo site_url('ppmp/delete_item')?>/" + id,
               type: "POST",
               dataType: "JSON",
               success: function(data) {
                   // location.reload();
               },
               error: function(jqXHR, textStatus, errorThrown) {
                   alert('Error deleting data');
               }
           });

       }
   }