title: jQuery dataTables - adding row does not work
body: <p>A lot of solutions is found but nothing is working for me. Can anyone please tell me what's wrong with this code?</p>
  
  <p>My table is like</p>
  
  <pre><code> &lt;table id="allPermission" class=" table-striped" cellspacing="0" width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Permission No&lt;/th&gt;
                      &lt;th&gt;Permission&lt;/th&gt;
                      &lt;th&gt;Command&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Permission No&lt;/th&gt;
                      &lt;th&gt;Permission&lt;/th&gt;
                      &lt;th&gt;Command&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>and my java script code is here</p>
  
  <pre class="lang-js prettyprint-override"><code>var tbl = $('#allPermission').DataTable({
    "processing": true,
    "retrieve": true,
    "serverSide": true,
    "lengthMenu": [
      [5, 10, 25, -1],
      [5, 10, 25, "All"]
    ],
    "ajax": $.fn.dataTable.pipeline({
      url: 'rest/showAllPermissions',
      pages: 2 // number of pages to cache
    }),
    "columns": [{
      "data": "permid"
    }, {
      "data": "permissionname"
    }, {
      "data": "DT_RowId",
      "sortable": false,
      "render": function(data, type, full) {
        var result = "";
  
        result = '&lt;a class="btn btn-info btn-sm" href=/fieldforce/user/editAdmin/' + full.dt_RowId + ' style="width: 58px;"' + '&gt;' + 'Edit' + '&lt;/a&gt;' + '&lt;a class="btn btn-danger btn-sm" href=/fieldforce/user/deleteAdmin/' + full.dt_RowId + ' style="margin-left: 15px;"' + '&gt;' + 'Delete' + '&lt;/a&gt;';
        return result;
      }
    }],
    "deferRender": true,
    "scrollY": "250px"
  });
  
  $('#addPerm').submit(function(e) {
    e.preventDefault();
    $('#loadingGif').css({
      "display": "block"
    });
    $('#formBody').css({
      "display": "none"
    });
    // do ajax submition
    $.ajax({
      url: "/fieldforce/administration/rest/addPermission",
      type: "POST",
      data: $(this).serialize(),
      success: function(data, status, xhr) {
        $('#loadingGif').css({
          "display": "none"
        });
        // $('#addPermission').modal('toggle');
        $('#messageBody').html("Success");
        tbl.row.add({
          "permid": '9',
          "permissionname": 'admin',
          "DT_RowId": '8'
        }).draw();
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#messageBody').html("Server Error");
      }
    });
  });
  </code></pre>
  
  
  
  <p>I am using jquery version jquery-1.11.1.min and datatable version is //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
  TIA</p>