jQuery dataTables - adding row does not work

Question

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

what is error you got?

CodeWithCoffee
– CodeWithCoffee

2015-05-15 06:27:12 +00:00
Commented May 15, 2015 at 6:27 — CodeWithCoffee
– CodeWithCoffee, Commented May 15, 2015 at 6:27
no error display when i debug. But row does not add

Amir
– Amir

2015-05-15 06:28:03 +00:00
Commented May 15, 2015 at 6:28 — Amir
– Amir, Commented May 15, 2015 at 6:28

Mohammad Ashfaq · Accepted Answer · 2015-05-15 09:17:24Z

3

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();

edited May 15, 2015 at 9:17

answered May 15, 2015 at 6:28

Mohammad Ashfaq

1,3732 gold badges14 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Amir Over a year ago

Thanks for response. I tried this already. It makes column mismatch error.

The Coder Over a year ago

@Amir, Can your show your code for HTML table. How many columns are there in HTML table?

davidkonrad Over a year ago

You can add both objects and arrays. See the docs -> datatables.net/reference/api/row.add() instead of the example. BTW, the last code snippet in your answer causes error and does not work, since you basically just try to insert an object to the first column.

Amir Over a year ago

davidkonrad @ so what should i do?

davidkonrad · Accepted Answer · 2015-05-15 07:53:10Z

1

You have two issues :

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

answered May 15, 2015 at 7:53

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

1 Comment

Amir Over a year ago

davidkonrad@ thank you for your valuable two information. I edited my question. Could you please see my latest code and tell me what did i wrong with this code?

jad-panda · Accepted Answer · 2015-05-15 06:35:39Z

0

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>

answered May 15, 2015 at 6:35

jad-panda

2,54717 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery dataTables - adding row does not work

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related