Enable CRUD Operations Inside HTML Table - jQuery dynamicTable

File Size: 5.08 KB
Views Total: 18488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Enable CRUD Operations Inside HTML Table - jQuery dynamicTable

A lightweight jQuery CRUD data table plugin which allows the user to add/remove/edit/export tabular data in a dynamic HTML table.

How to use it:

1. Include the latest version of jQuery library and the jQuery dynamicTable plugin' script on your webpage.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.dynamicTable.js"></script>

2. Create an empty table element on the webpage.

<table id="myTable"></table>

3. Initialize the plugin and populate the html table with your pre-defined data.

$("#myTable").dynamicTable({
  columns: [{
          text: "Name",
          key: "name"
      },
      {
          text: "Age",
          key: "age"
      },
      {
          text: "Gender",
          key: "gender"
      },
  ],
  data: [{
          name: 'Mr. Jeff Brown',
          age: 30,
          gender: 'M',
      },
      {
          name: 'Ms. Rebeca John',
          age: 24,
          gender: 'F',
      },
  ]
});

4. Set the input controls.

$("#myTable").dynamicTable({
  getControl: function (columnKey) {
      if (columnKey == "age") {
          return '<input type="number" class="form-control" />';
      }

      if (columnKey == "gender") {
          return '<select class="form-control"><option value="M">Male</option><option value="F">Female</option></select>';
      }

      return '<input type="text" class="form-control" />';
  },
});

5. Decide whether to show the action column:

$("#myTable").dynamicTable({
  showActionColumn: true
});

6. Customize the action buttons.

$("#myTable").dynamicTable({
  buttons: {
    addButton: '<input type="button" value="Add" class="btn btn-primary" />',
    cancelButton: '<input type="button" value="Cancel" class="btn btn-primary" />',
    deleteButton: '<input type="button" value="Delete" class="btn btn-danger" />',
    editButton: '<input type="button" value="Edit" class="btn btn-primary" />',
    saveButton: '<input type="button" value="Save" class="btn btn-success" />',
  },
});

7. Get the current data. This will return a data array.

var data = $("#myTable").getTableData();

Change log:

2017-08-08

  • Input row removed in case of absence of action column

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