CODEWITHSUNDEEP
javascriptjquerydatatables
Amir
Amir

Reputation: 8929

jQuery dataTables - adding row does not work

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.net/1.10.7/js/jquery.dataTables.min.js TIA

Upvotes: 3

Views: 13404

Answers (3)

Mohammad Ashfaq
Mohammad Ashfaq

Reputation: 1373

According to : https://datatables.net/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.net/reference/api/rows.add()

you can try this :

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

Upvotes: 3

davidkonrad
davidkonrad

Reputation: 85518

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.net/eco6cgqe/

Upvotes: 1

jad-panda
jad-panda

Reputation: 2547

see this example

$(function(){

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

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/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>

Upvotes: 0

Related Questions