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
Share Improve this question edited Jul 24, 2017 at 10:38 Amir asked May 15, 2015 at 6:25 AmirAmir 8,9297 gold badges46 silver badges51 bronze badges 2- 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
Reset to default 3According 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 :
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/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>