jquery-editable-table

JQuery Editable tables is a JQuery based javascript library which turns ordinary HTML tables into editable row. It allows users to quickly edit records in the table and save the data into database. It requires JQuery, supports but does not required bootstrap and font-awesome icons and Laravel MessageBag response for errors.

Installation:

Using bower:

  bower install jquery-editable-table

Or clone or download code from github repo

  https://github.com/dasatti/jquery-editable-table

Example

Given an ordinary HTML table like this

The plugin will convert it into following

Validation errors coming from server side are also supported

Usage

HTML

  <table id="table">
      <tr>
          <td data-editable="name">Danish</td>
          <td data-editable="phone">923125511678</td>
          <td data-editable="age" data-editable-type="number">30</td>
          <td><!-- Extra column for buttons--></td>
      </tr>
  </table>

Javascript

  $('#table').editableTable({
       //configuration variables will go here, all of them are optional
       //Update callback
       onUpdate : function(data, callback){
           //perform what ever you want with the data, usually ajax call to server to update record
           //execute the callback to inform editable table about update status, For ajax place following in success callback
           callback({
               success : 1 //1 or 0 | required
               errors : ["Error 1", "Error 2"] //Put errors here is there was some error in update | optional
               errorsBag : {
                   // Laravel 5 standard ErrorBag response | optional
                   field_1_name : ["Error 1", "Error 2"],
                   field_2_name : ["Error 1", "Error 2"]
               }
           })
       },
       //Delete callback
       onDelete : function(recordId, row, callback){
           //Your delete code here, usually ajax call to server
           success : 1, //1 or 0 | required
           errors : ["Error 1", "Error 2"] //Put errors here is there was some error in update | optional
           errorsBag : {
                   // Laravel 5 standard ErrorBag response | optional
                   field_1_name : ["Error 1", "Error 2"],
                   field_2_name : ["Error 1", "Error 2"]
               }
       }
   });

## Configuration:

   {
            labels : false,                 //Enable show labels for edit and delete buttons
            editLabel : 'Edit',             //Edit button label
            editBtnClass : 'btn btn-info',  //Edit button class
            editIcon : 'fa fa-pencil',      //Edit button icon class
            updateLabel : 'Update',         //Update button label
            updateIcon : 'fa fa-save',      //Update button icon class
            deleteLabel : 'Delete',         //Delete button label
            deleteIcon : 'fa fa-trash',     //Delete button icon class
            deleteBtnClass : 'btn btn-danger',  //Delete button class
            editType : 'row',               //Edit mode
            formInputClass : 'form-control',//Inputs class
            deleteMsg : 'Are you sure you want to delete this record?', //On delete confirmation message
            onUpdate : null,                //On update callback
            onDelete : null,                //On delete callback
            errorColor : 'red'              //Error messages text color
   }