Inline Table Editing With jQuery And PHP - Tabledit
File Size: | 43.4 KB |
---|---|
Views Total: | 67685 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The Tabledit jQuery plugin provides the inline editing/removing functionality on table cells and sends resulting changes via AJAX so you can handle them accordingly using PHP for backend.
Compatible with Bootstrap 3 and Bootstrap 4 framework. Licenced under the GPL-3.0.
Basic usage:
1. Include the JavaScript file jquery.tabledit.js
after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.tabledit.js"></script>
2. Assume that you have an html table as this:
<table class="table"> <thead> <tr> <th>Id</th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>
3. Call the function on the html table and specify the URL the resulting changes should be sent.
$('#my-table').Tabledit({ url: 'example.php', columns: { identifier: [0, 'id'], editable: [[1, 'col1'], [2, 'col1'], [3, 'col3']] } });
4. The example PHP:
<?php // Basic example of PHP script to handle with jQuery-Tabledit plug-in. // Note that is just an example. Should take precautions such as filtering the input data. header('Content-Type: application/json'); // CHECK REQUEST METHOD if ($_SERVER['REQUEST_METHOD']=='POST') { $input = filter_input_array(INPUT_POST); } else { $input = filter_input_array(INPUT_GET); } // PHP QUESTION TO MYSQL DB // Connect to DB /* Your code for new connection to DB*/ // Php question if ($input['action'] === 'edit') { // PHP code for edit action } else if ($input['action'] === 'delete') { // PHP code for edit delete } else if ($input['action'] === 'restore') { // PHP code for edit restore } // Close connection to DB /* Your code for close connection to DB*/ // RETURN OUTPUT echo json_encode($input); ?>
5. The default plugin options and callback functions:
$('#my-table').Tabledit({ // Link to server script url: window.location.href, // Server request method for action 'edit' and 'delete' editmethod: 'post', deletemethod: 'post', // Class for form inputs inputClass: 'form-control input-sm', // Class for toolbar header column toolbarHeaderClass: '', // Class for buttons toolbar toolbarClass: 'btn-toolbar', // Class for buttons group groupClass: 'btn-group btn-group-sm', // Class for row when ajax request fails dangerClass: 'danger', // Class for row when save changes successClass: 'success', // Class for row when is deleted mutedClass: 'text-muted', // Class for prohibiting cell editing noEditClass: 'noedit', // Trigger to change for edit mode eventType: 'click', // Change the name of attribute in td element for the row identifier rowIdentifier: 'id', // Hide the column that has the identifier hideIdentifier: false, // Activate focus on first input of a row when click in save button autoFocus: true, // Localization -(en, default) - LowerCase or UpperCase lang: 'en', // Debug mode debug: false, // Escape Html - convert hmtl character escapehtml: true, // Activate edit button instead of spreadsheet style editButton: true, // Activate delete button deleteButton: true, // Activate save button when click on edit button saveButton: true, // Activate restore button to undo delete action restoreButton: true, // Customize buttons created in the table buttons: { edit: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-pencil"></span>', action: 'edit' }, delete: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-trash"></span>', action: 'delete' }, save: { class: 'btn btn-sm btn-success', html: '' }, restore: { class: 'btn btn-sm btn-warning', html: 'Restore', action: 'restore' }, confirm: { class: 'btn btn-sm btn-danger', html: 'Confirm' } }, /** * REQUIRED - Set up in user options * Identifier column and editable columns * More info in Documentation (https://markcell.github.io/jquery-tabledit/#documentation) * columns: '', */ // Executed after draw the structure onDraw: function () { return; }, // Executed when the ajax request is completed onSuccess: function () { return; }, // Executed when occurred an error on ajax request onFail: function () { return; }, // Executed whenever there is an ajax request onAlways: function () { return; }, // Executed before the ajax request onAjax: function () { return; } });
Changelog:
2018-04-15
- Added Ajax Error function
2018-04-15
- Editing onAjax ()
2018-03-31
- Compatible with Bootstrap 4
2017-09-04
- v1.2.7
2017-08-25
- Set 'setTimeout'
This awesome jQuery plugin is developed by BluesatKV. For more Advanced Usages, please check the demo page or visit the official website.