Adding lines to table with jQuery and DataTables

July 27, 2013

Reading time ~2 minutes

Time and again I find myself in need of an extendable form where users can add rows to the form directly. I have found that the best and easiest solution for this is to use the exellent DataTables plugin for jQuery. I will show you a full example of a simple implementation of this in this blog post.

<head> section

Starting from the beginning. We need to make sure that we have the proper libraries available.

<head>
  <title>DataTables add/delete rows example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <style media="screen" type="text/css">
  html {
    font-family: verdana, sans-serif;
  }
  </style>
</head>

We are adding jQuery just before DataTables as DataTables requires jQuery.

Control buttons

We’ll add some control buttons to the <body> tag.

<div id="controlButtons">
  <button onclick="addRow();">Add row</button>
  <button onclick="deleteRow();">Delete row</button>
</div>

Add the form table

Also in your <body> tag, please go ahead and add the actual table.

<form action="" method="POST">
  <table id="myTable">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <input type="submit">
</form>

Take extra care in looking through the table structure. We started with giving the <table> an id set to myTable. This will be used as a reference to our table in the next step. Also, the table consists of a <thead> and <tbody>.

Write the JavaScript to bind it all together

Now, add the JavaScript below to the very end of your <body> tag. Take some time to read it through.

<script type="text/javascript">
  var count = 0;

  $(document).ready(function() {
    $('table#myTable').dataTable({
      'bFilter': false,
      'bInfo': false,
      'bPaginate': false,
    });

    // Add initial row
    addRow();
  } );

  function addRow() {
    $('table#myTable').dataTable().fnAddData( [
      '<input type="text" name="first_name_' + count + '">',
      '<input type="text" name="last_name_' + count + '">' ] );

    count++;
  }

  function deleteRow () {
    if (count != 1) {
        $("table#myTable").dataTable().fnDeleteRow(count - 1);

        count--;
    }
  }
</script>

So, what the JavaScript does is fairly straight forward. It

  • Initiates DataTables when the page has loaded
  • Defines a global function for adding rows
  • Defines a global function for removing rows

The initialization of DataTables is done within $(document).ready(). We tell DataTables which table to look for (table#myTable) and then we pass some configuration to remove functionality like pagination that is not wanted in a form context.

We are using two of DataTables methods to add and remove rows from the table. We use fnAddData() to add new rows to the table. It takes an array of fields/columns.

Running vim-airline with Maximum Awesome

I use [Maximum Awesome](https://github.com/square/maximum-awesome) when I code in [vim](http://www.vim.org/), it's a great starting place...… Continue reading

Quicksort implementation in Python

Published on August 04, 2014

Fibonacci generator in Python

Published on August 04, 2014