Inline Table Editing With jQuery And PHP - Tabledit

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.