BSTable is a dynamic jQuery CRUD table plugin that enables you to add / remove / update / edit attributes in an HTML table.
Javascript library to make HMTL tables editable with Bootstrap. Based on the boot stable JavaScript library which allowed editing of tables for each page – however, it did not allow handling of different events for each table.
How to make use of it:
1. Load the necessary jQuery, Bootstrap 4, and Font Awesome from CDN.
<!-- Bootstrap core CSS--> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <!-- Font Awesome --> <link rel="stylesheet" href="/path/to/cdn/fontawesome/all.css" /> <!-- JQuery library --> <script src="/path/to/cdn/jquery.min.js"></script>
2. Load the BSTable plugin after jQuery.
<script src="bstable.js"></script>
3. Initialize the plugin on the HTML table to be editable.
<table class="table table-striped table-bordered" id="example"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@</td> </tr> </tbody> </table>
var editableTable = new BSTable("example"); editableTable.init();
4. Define which columns (zero-indexed) needs to be editable.
var editableTable = new BSTable("example",{ editableColumns:"1,2,3" });
5. Create an Add button that lets you insert a brand new row to the HTML table.
<button id="new-row-button" class="btn btn-dark"> New Row </button>
var editableTable = new BSTable("example",{ $addButton: $('#new-row-button') });
6. Callback capabilities.
var editableTable = new BSTable("example",{ onEdit: function() {}, onBeforeDelete: function() {}, onDelete: function() {}, onAdd: function() {}, });
7. Override the default rendering template.
var editableTable = new BSTable("example",{ advanced: { columnLabel: 'Actions', buttonHTML: `<div class="btn-group pull-right"> <button id="bEdit" type="button" class="btn btn-sm btn-default"> <span class="fa fa-edit" > </span> </button> <button id="bDel" type="button" class="btn btn-sm btn-default"> <span class="fa fa-trash" > </span> </button> <button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;"> <span class="fa fa-check-circle" > </span> </button> <button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;"> <span class="fa fa-times-circle" > </span> </button> </div>` } });
8. Refresh the HTML table after the tabular information is up to date.
editableTable.refresh();
Create Dynamic CRUD Bootstrap Tables, BSTable Plugin/Github
See Demo And Download
Official Website(CraftingGamerTom): Click Here
This superior jQuery/javascript plugin is developed by CraftingGamerTom. For extra Advanced Usage, please go to the official website.