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