Easy Inline Editor For HTML Tables - jQuery fullTable

fullTable is an easy yet full featured jQuery data table plugin that lets you create a dynamic CRUD (create, read, update, delete) table with sorting, filtering, input validation and client side value processing. Compatible with Bootstrap framework.

How to use it:

1. To use the plugin start with adding the following JavaScript and CSS files in your html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.fulltable.js"></script>
<link rel="stylesheet" href="jquery.fulltable.css">

2. Create a normal html table with initial tabular data as these:

<table class="fulltable fulltable-editable" id="test-table">
  <thead>
    <tr>
      <th fulltable-field-name="firstname">First name</th>
      <th fulltable-field-name="lastname">Last name</th>
      <th fulltable-field-name="gender">Gender</th>
      <th fulltable-field-name="age">Age</th>
      <th fulltable-field-name="height">Height</th>
      <th fulltable-field-name="description">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>John</span></td>
      <td><span>Smith</span></td>
      <td><span>xy</span></td>
      <td><span>23</span></td>
      <td><span>1.72</span></td>
      <td><span>Famous explorer</span></td>
    </tr>
    <tr>
      <td><span>Peter</span></td>
      <td><span>Pan</span></td>
      <td><span>xy</span></td>
      <td><span>10</span></td>
      <td><span>1.60</span></td>
      <td><span>Flyer boy who does not grow</span></td>
    </tr>
    <tr>
      <td><span>Mary</span></td>
      <td><span>Stevenson</span></td>
      <td><span>xx</span></td>
      <td><span>35</span></td>
      <td><span>1.69</span></td>
      <td><span>Unknown woman</span></td>
    </tr>
  </tbody>
</table>

3. Initialize the plugin and config the input fields for the inline editor.

$("#test-table").FullTable({
  "alwaysCreating":true,
  "fields": {
    "gender":{
      "options":[
        {
          "title":"Male",
          "value":"xy"
        },
        {
          "title":"Female",
          "value":"xx"
        }
      ],
      "mandatory":true,
      "placeholder":"Select one",
      "errors":{
        "mandatory":"Gender name is mandatory"
      }
    },
    "firstname":{
      "mandatory":true,
      "errors":{
        "mandatory":"First name is mandatory"
      }
    },
    "lastname":{
      "mandatory":true,
      "errors":{
        "mandatory":"Last name is mandatory"
      }
    },
    "age":{
      "type":"integer",
      "mandatory":false,
      "validator":function(age) {
        if (age >= 0) {
          return true;
        } else {
          return false;
        }
      },
      "errors":{
        "type":"Age must be an integer number",
        "mandatory":"Age is mandatory",
        "validator":"Age cannot be negative"
      }       
    },
    "height":{
      "type":"decimal",
      "mandatory":false,
      "validator":function(height) {
        if ((height > 0.3) && (height <= 2.8)) {
          return true;
        } else {
          return false;
        }
      },
      "errors":{
        "type":"Height must be a number",
        "mandatory":"Height is mandatory",
        "validator":"Height cannot be neither biggest than 2.8 nor lowest than 0.3"
      }
    },
    "description":{
      "mandatory":false
    }
  }
});

4. Draw the CRUD table.

$("#test-table").FullTable("draw");

5. More configuration options.

$("#test-table").FullTable({

  // is editable
  "editable":true,

  // is filterable
  "filterable":true,

  // is sortable
  "orderable":true,

  // is selectable
  "selectable":false,
  
  // event handlers
  "on":{
    "update":function() {
      
    }
  }

});

6. Get the current data.

$("#test-table").FullTable("getData")

Change log:

2017-10-12

• Compatible with old browsers.

2017-10-10

• Correction of errors.

2017-10-06

• Compatibility with IE8

---

This awesome jQuery plugin is developed by joseluisballesterosd. For more Advanced Usages, please check the demo page or visit the official website.