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" (www.datatables.net) 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() {
          $('table#myTable').dataTable().fnAddData([
            'input type="text" class="first_name" id="first_name_' + count + '">',   // Note the class name
            'input type="text" class="last_name" id="last_name_' + count + '">'
          ]);
    
          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;
              }
              rules.push(rec);
    
            })
    
            alert(JSON.stringify(rules));
    
    
          });
    

Below is Sample of editable Datatables


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

Popular posts from this blog

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)

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

Elastic Beats on pfSense : Installation and configuration

Summary Though in many cases syslog is preferred to transport the pfSense logs to external system, Elastic beats provides quite a niche way to send the logs while modelling the data alongside. This makes it ready-made to send to ElasticSearch directly and get ready-made outcomes like SIEM, performance etc. Pre-reqs A build server (preferably Ubuntu or Fedora) with internet connectivity shell access to pfsense server Basic knowledge of Elastic Stack (filebeat.yml configurations etc) Ensure connectivity is allowed from pfsense machine to your Elastic Stack receiver Setup Summary Connectivity tests Install dependencies in build server (vagrant, virtualbox, gmake, go etc) Download Elastic Beats source Make elastic Beats package for FreeBSD Copy binary packages to pfsense server Configure Beats to send to destination Configure ElasticSearch to view the data Installation Steps Connectivity tests Logon to pfsense server via Shel