Bootstrap Datatables pagination and sorting - ajax

Question

I'm using datatables and bootstrap for pagination but its not working.
The data is received via ajax ,as soon as i press any header to sort the table, the data dissappears.
The html for table itself
<table id="tablePersonnel"
class="table table-striped table-bordered table-sm" cellspacing="0"
width="100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>First Name</th>
<th>Phone number</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>First Name</th>
<th>Phone number</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
here is the javascript for the function responsible for getting the data
refreshTable = function() {
$
.ajax({
url : "listPersonnel",
dataType : 'json',
success : function(response) {
data = response;
var no = 1;
for (i = 0; i < data.length; i++) {
$("#tablePersonnel")
.append(
'<tr> <td>'
+ data[i].id
+ '</td> <td>'
+ data[i].firstname
+ '</td> <td>'
+ data[i].name
+ '</td> <td>'
+ data[i].phone
+ '</td> <td>'
+ data[i].status
+ '</td><td><input type="button" class="btn1" onclick="openEditPopup('
+ i
+ ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
+ i
+ ');" value=""><i class="fa fa-trash"></i></button></td> </tr>');
no = no + 1;
}
}
});
}
Any help is greatly appreciated.

Answer 1

Your approach involves adding data to the HTML table (i.e. to the DOM). However, the DataTables object does not know about this data - which is why the data disappears whenever you perform any action which involves a DataTables refresh. DataTables is showing you its data - which is no data.
Instead, you can perform your ajax call from within DataTables itself - and then DataTables will handle the data for you.
I will assume the JSON returned by your ajax call has the following structure:
[
{
"id": 123,
"firstname": "Tom",
"name": "Smith",
"phone": "121-212-1212",
"status": "foo"
},
{
"id": 123,
"firstname": "Jane",
"name": "Jones",
"phone": "434-545=6767",
"status": "bar"
}
]
In that case, you can use the following table HTML:
<table id="example">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Name</th>
<th>Phone</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
</table>
And your DataTable configuration will be this:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "listPersonnel",
"dataSrc": ''
},
"columns": [
{ "data": "id" },
{ "data": "firstname" },
{ "data": "name" },
{ "data": "phone" },
{ "data": "status" },
{ "data": function ( row, type, val, meta ) {
var content = '<input type="button" class="btn1" onclick="openEditPopup('
+ row.id
+ ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
+ row.id
+ ');" value=""><i class="fa fa-trash">trash</i></button>'
return content;
} }
]
} );
} );
</script>
The result looks like this (I don't have your trash icon):
Points to note:
There is no iteration logic here - it's handled for you by DataTables, as it consumes your JSON response.
If your JSON has a different structure, you will need to adjust the above. Examples of different approaches are shown here.
In your case, we use dataSrc = '' because your JSON is an array of objects - and it does not have a container object.
The data in the final column is generated via a function which builds the string you need.
You can define column headings directly in DataTable also, instead of in the HTML.
There are many variations on this approach - DataTables has a lot of flexibility.