title: JQuery Datatables Add Row
body: <p>I'm trying to create a table that a user can add, edit, and delete elements in. I'm using the datatables plugin. Here's the <a href="http://editor.datatables.net/tutorials/api_manipulation" rel="nofollow">tutorial</a> for what I want to do. Here is my html code:</p>
  
  <pre><code>&lt;p&gt;&lt;button class="editor_create"&gt;Add new person&lt;/button&gt;&lt;/p&gt;
      &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="reg_more" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th width="30%"&gt;First Name&lt;/th&gt;
                  &lt;th width="18%"&gt;Last Name&lt;/th&gt;
                  &lt;th width="18%"&gt;Phone&lt;/th&gt;
                  &lt;th width="18%"&gt;Email&lt;/th&gt;
                  &lt;th width="18%"&gt;Ethnicity&lt;/th&gt;
                  &lt;th&gt;Edit&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And here's the jquery code:</p>
  
  <pre><code>$(document).ready(function(e) {
  $('#reg_more').dataTable({
                  "bLengthChange": false,
                  "bInfo": false,
                  "bPaginate": false,
                  "bStateSave": true,
                  "rowHeight": 'auto',
                  "bFilter": true,
                  "bSort": false,
                  "bAutoWidth": false,
  
                  "aoColumns": [
                      { "mDataProp": "First Name" },
                      { "mDataProp": "Last Name" },
                      { "mDataProp": "Phone" },
                      { "mDataProp": "Email", "sClass": "center" },
                      { "mDataProp": "Ethnicity", "sClass": "center" },
                      {
                          "mDataProp": null, 
                          "sClass": "center",
                          "sDefaultContent": '&lt;a href="" class="editor_edit"&gt;Edit&lt;/a&gt;',
                          "bSortable": false,
                          "bSearchable": false
                      },
                      {
                          "mDataProp": null, 
                          "sClass": "center",
                          "sDefaultContent": '&lt;a href="" class="editor_remove"&gt;Delete&lt;/a&gt;',
                          "bSortable": false,
                          "bSearchable": false
                      }
                  ]
              }); 
          }
          $("#submit").show();
          window.scrollTo(0,document.body.scrollHeight);
      });
  
      var editor = new $.fn.dataTable.Editor( {
          "domTable": "#reg_more"
      } );
  
      //style="display:none;"
      //$("#addbtn").click(addrow);
  
      editor.add( [ 
        {
            "label": "First Name:",
            "name": "fname"
        }, {
            "label": "Last Name:",
            "name": "lname"
        }, {
            "label": "Phone:",
            "name": "phone"
        }, {
            "label": "Email:",
            "name": "email"
        }, {
            "label": "Ethnicity:",
            "name": "ethnicity"
        }
      ] );
  
      $('button.editor_create').on('click', function (e) {
          e.preventDefault();
  
          editor.create(
              'Add new person',
              {
                  "label": "Add",
                  "fn": function () {
                      editor.submit()
                  }
              }
          );
      } );
  
      $('#reg_more').on('click', 'a.editor_edit', function (e) {
          e.preventDefault();
  
          editor.edit(
              $(this).parents('tr')[0],
              'Edit record',
              {
                  "label": "Update",
                  "fn": function () { editor.submit(); }
              }
          );
      } );
  
      $('#reg_more').on('click', 'a.editor_remove', function (e) {
          e.preventDefault();
  
          editor.message( "Are you sure you want to remove this row?" );
          editor.remove(
              $(this).parents('tr')[0],
              'Delete row', 
              {
                  "label": "Update",
                  "fn": function () {
                      editor.submit()
                  }
              }
          );
      } );
  });
  </code></pre>
  
  <p>The add button ends up submitting the form rather than opening up a small form where the user can input all the information. How do I make it popup a small window like in the tutorial where the "create new record" button opens up a form?</p>