A lot of solutions is found but nothing is working for me. Can anyone please tell me what's wrong with this code?

My table is like

 <table id="allPermission" class=" table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </tfoot>
        </table>

and my java script code is here

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 = '<a class="btn btn-info btn-sm" href=/fieldforce/user/editAdmin/' + full.dt_RowId + ' style="width: 58px;"' + '>' + 'Edit' + '</a>' + '<a class="btn btn-danger btn-sm" href=/fieldforce/user/deleteAdmin/' + full.dt_RowId + ' style="margin-left: 15px;"' + '>' + 'Delete' + '</a>';
      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");
    }
  });
});

I am using jquery version jquery-1.11.1.min and datatable version is //cdn.datatables/1.10.7/js/jquery.dataTables.min.js TIA

A lot of solutions is found but nothing is working for me. Can anyone please tell me what's wrong with this code?

My table is like

 <table id="allPermission" class=" table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </tfoot>
        </table>

and my java script code is here

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 = '<a class="btn btn-info btn-sm" href=/fieldforce/user/editAdmin/' + full.dt_RowId + ' style="width: 58px;"' + '>' + 'Edit' + '</a>' + '<a class="btn btn-danger btn-sm" href=/fieldforce/user/deleteAdmin/' + full.dt_RowId + ' style="margin-left: 15px;"' + '>' + 'Delete' + '</a>';
      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");
    }
  });
});

I am using jquery version jquery-1.11.1.min and datatable version is //cdn.datatables/1.10.7/js/jquery.dataTables.min.js TIA

• javascript
• jquery
• datatables

• what is error you got? – CodeWithCoffee Commented May 15, 2015 at 6:27
• no error display when i debug. But row does not add – Amir Commented May 15, 2015 at 6:28

3 Answers 3

According to : https://datatables/examples/api/add_row.html site, you should pass array in add method hence

Try this:

 var tbl = $('#allPermission').DataTable();
          tbl.row.add(['9','admin','8']).draw();

or according to this : https://datatables/reference/api/rows.add()

you can try this :

var tbl = $('#allPermission').DataTable();
 tbl.rows.add([{
     "permid": '9',
     "permissionname": 'admin',
     "dt_RowId": '8'
 }]).draw();

You have two issues :

1. You should include a <tbody> element. Even though it would work adding rows without a <tbody>, there are a serious risk of errors when using dataTables with malformed markup.

2. When adding objects as new rows you must have specified which data properties that corresponds to which columns through the columns : [ { data : 'property' } ...] option.

So initialise your dataTable like this instead :

var tbl = $('#allPermission').DataTable({
    columns: [
        { data: "permid" },
        { data: "permissionname" },
        { data: "dt_RowId" }
    ]    
});

and your code works. Demo -> http://jsfiddle/eco6cgqe/

see this example

$(function(){

  var tbl = $('#allPermission').DataTable();
  tbl.row.add(['9','admin','8']).draw();

});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="allPermission">
  <thead>
            <tr>
                <th>permid</th>
                <th>permissionname</th>
                <th>dt_RowId</th>
            </tr>
        </thead>

</table>