Dynamic Table Creator With Inline Editing - jQuery Virtualtable

File Size: 6.1 KB
Views Total: 3474
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dynamic Table Creator With Inline Editing - jQuery Virtualtable

The Virtualtable jQuery plugin allows the user to dynamically generate an HTML table from JSON data.

With support for inline editing mode that sends the modified data to the server via AJAX requests.

How to use it:

1. Create an empty table element on the webpage.

<div class="table">
  
</div>

2. Load both jQuery library and the vtable.js at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script type="text/javascript" src="js/vtable.js"></script>

3. Generate a basic HTML table from JSON data you provide.

var table=new vTable({

    // table selector
    "selector": ".table",

    // specify the number of rows and columns
    "row": 2,
    "column": 4,

    // additional CSS classes
    "style": "table table-striped",

    // indentifier
    "identifier" : "id",

    // table header
    "columns" : ["id","name","age","Reg no"],

    // tabular data
    "values":[
      [1,"vijay",12,"reg no"],
      [2,"shane",13,"reg no"]
    ]
    
});

4. Enable the inline editing on the HTML table.

var table=new vTable({

    // table selector
    "selector": ".table",

    // specify the number of rows and columns
    "row": 2,
    "column": 2,

    // additional CSS classes
    "style": "table table-striped",

    // indentifier
    "identifier" : "id",

    // table header
    "columns" : ["id","name","age","Reg no"],

    // tabular data
    "values":[
      [1,"vijay",12,"reg no"],
      [2,"shane",13,"reg no"]
    ]

    // default: 'default'
    mode":"editable",

    // ajax settings
    "url":"https://localhost/sample/",
    "method":"post", 
    "optional_data":{"auth":"tqetrweqretqwet"},
    
    // editable columns & data
    "editableColumns" : [["name","text"],["age","select",{"12":"12","13":"13","14":"14"}]]

});

5. Hide the tabel cell when editing.

.vtable td[editable='true'] input,.vtable td[editable='true'] select{
  display: none;
}

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