So I tried Charisma, a Bootstrap-based admin panel and implemented a server-side code using CodeIgniter. Charisma uses DataTables, a jQuery plugin that “is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table”. At least that’s what DataTables said.

Good template (thanks Mr. Usman!). Now let’s put some javascript codes into that red, delete button. Here I used Bootbox library to show confirmation dialog, as well as noty to show error notification.

I used DOM as data source for my DataTables :

<?php foreach ($order_data as $row) { >
     <tr id="ordrrow-<?php echo $row->orders_id; ?>">
     ...
     </tr>
<?php }?>

Here’s the code for that red button :

<a class="btn btn-danger order-delete" href="" id="<?php echo "btn-$row->orders_id"; ?>">
     <i class="icon-trash icon-white"></i>Delete
</a>

$('.order-delete').click(function(e) {
    var id = $(this).attr('id').substr(4);
    e.preventDefault();
    bootbox.confirm("Are you sure? ", function(r) {
        if (r) {
            //sent request to delete order with given id
            $.ajax({
                type: 'post',
                url: site_url + 'order/delete_order',
                data: {order_id: id},
                success: function(b) {
                    if (b) {
                        //delete row
                        orTable.fnDeleteRow($('tr#ordrrow-' + id)[0]);
                    } else {
                        //failed to delete, sent noty in
                        noty({
                            text: "Failed to delete, please try again later",
                            layout: "topCenter",
                            type: "alert",
                            timeout: 3
                        });
                    }
                }
            });
        }
    });
});

It works. Here’s few things to notice in this javascript code :

1. Line 3 is important! You have to write it down or otherwise the page will reload (since we normally put href="#")
2. Line 9 is where we use global javascript variable site_url, which has been defined somewhere as echo site_url()
3. Line 14 : I choose DOM (the simplest one) since I don’t think my table will grow into million of rows. This line wasted most of my time googling since I didn’t realize on the first time that I have to use that index selector [0]. If you just write orTable.fnDeleteRow($('tr#ordrrow-'+id)), the row will be removed successfully but the counter (on the lower left of the table) will not decrement.