Skip to main content

CRUD form using Datatables with dynamic Add & Delete rows

Hope you guys have suffered same issues as me with Web Development to create forms with Create/Read/Update/Delete functionality. I really use "Datatables" ( for displaying data in tabular format.  Datatables has got many advantages and is easily compatible with bootstrap stylings.

  • IE8+ support, major browser support and uses jQuery as its core
  • Can natively map JSON data
  • Searching and Filtering functionality with pagination Support
  • MultiLanguage support, ClientSide Sorting, AJAX based inputs
  • Can filter required Columns at front-end
Datatables is free but it's editor (editable tables) are paid. Hence I thought of putting together a simple table to use for editing and publishing data for POST purposes.
In Summary, what we are doing here is
  • Creating HTML stub with table headers within a form. Also add "Add Row" and "Delete Row" buttons with onclick actions attached to it and a "Submit" button
  • In your javascript, "on document load" create a datatable with built in "input=text" form for rows. This can be done using fnAddData
        function addRow() {
            'input type="text" class="first_name" id="first_name_' + count + '">',   // Note the class name
            'input type="text" class="last_name" id="last_name_' + count + '">'
  • Similarly for "Delete Row" action, bind it to  
     $("table#myTable").dataTable().fnDeleteRow(count - 1);
  • Using "Add Row" and "Delete Row" you can add/remove any number of rows.
  • When you Click the Submit button, the dataTable is scanned and fetched as Key-Value object pair. This is pushed into a JSON object Array.
  •       $("#submitButton").click(function() {
            oTable = $('#myTable').dataTable();
            var numColumns = oTable.fnGetData(0).length;
            var rules = [];                                     
            $.each(oTable.fnGetData(), function(i, row) {
              var rec = {};
              for (var c = 0; c < numColumns; c++) {
               // Extracting Class name as KEY
                var key = ($(row[c]).attr('class'));  
               // Dynamic Rows as VALUE          
                var value = ($('#' + key + '_' + i).val());     
                rec[key] = value;

Below is Sample of editable Datatables

Pure web-based create/read/update/delete (CRUD) table with AJAX post functionality

Popular posts from this blog

Create your own Passport Photo using GIMP

This tutorial is for semi-techies who knows a bit of GIMP (image editing).   This tutorial is for UK style passport photo ( 45mm x 35 mm ) which is widely used in UK, Australia, New Zealand, India etc.  This is a quick and easy process and one can create Passport photos at home If you are non-technical, use this link   .  If you want to create United States (USA) Passport photo or Overseas Citizen of India (OCI) photo, please follow this link How to Make your own Passport Photo - Prerequisite GIMP - One of the best image editing tools and its completely Free USB stick or any memory device to store and take to nearby shop A quality Digital camera Local Shops where you can print. Normally it costs (£0.15 or 25 US cents) to print 8 photos Steps (Video Tutorial attached blow of this page) Ask one of your colleague to take a photo  of you with a light background. Further details of how to take a photo  yourself       Take multiple pictures so that you can choose from th

Syslog Standards: A simple Comparison between RFC3164 & RFC5424

Syslog Standards: A simple Comparison between RFC3164 (old format) & RFC5424 (new format) Though syslog standards have been for quite long time, lot of people still doesn't understand the formats in detail. The original standard document is quite lengthy to read and purpose of this article is to explain with examples Some of things you might need to understand The RFC standards can be used in any syslog daemon (syslog-ng, rsyslog etc.) Always try to capture the data in these standards. Especially when you have log aggregation like Splunk or Elastic, these templates are built-in which makes your life simple. Syslog can work with both UDP & TCP  Link to the documents the original BSD format ( RFC3164 ) the “new” format ( RFC5424 ) RFC3164 (the old format) RFC3164 originated from combining multiple implementations (Year 2001)

VS Code & Portable GIT shell integration in Windows

Visual Studio Code & GIT Portable shell Integration Summary Many of your corporate laptop cannot install programs and it is quite good to have them as portable executables. Here we find a way to have Portable VS Code and Portable GIT and integrate the GIT shell into VS Code Pre-Reqs VS Code (Install version or Portable ) GIT portable Steps Create a directory in your Windows device (eg:  C:\installables\ ) Unpack GIT portable into the above directory (eg it becomes: C:\installables\PortableGit ) Now unpack Visual Studio (VS) Code and run it. The default shell would be windows based Update User or Workspace settings of VS Code (ShortCut is:  Control+Shift+p ) Update the settings with following setting { "workbench.colorTheme": "Default Dark+", "git.ignoreMissingGitWarning": true, "git.enabled": true, "git.path": "C:\\installables\\PortableGit\\bin\\git.exe", ""