fetch a row in php and apply datatable - php

Question

Iam using DataTable this is my code:
var table = $('#open').DataTable( { });
This is my html table code:
<table id="open">
<thead>
<tr>
<th rowspan="2"> S.No </th>
<th rowspan="2"> Patient Name </th>
<th colspan="2"> Booking </th>
<th rowspan="2"> Insurance Company</th>
<th rowspan="2">Appointment Status</th>
<th rowspan="2">Edit</th>
</tr>
<tr>
<th> Date </th>
<th> Time </th>
</tr>
</thead>
<tbody id="booking">
</tbody>
</table>
This is my ajax code:
var date = $("#date").val();
$.ajax({
type: 'POST',
url: 'booked1.php',
data: {
date: date
},
cache: false,
dataType: "html",
success: function (response) {
alert(response);
$("#booking").html(response);
$("#loadarModal").modal('hide');
}
});
This my booked1.php code:
if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
appointment_status as appointment_status from at_booking where date='$date'
");
while ($rows = mysqli_fetch_assoc($query)) {
$name = $rows['name'];
$id = $rows['id'];
$date = $rows['date'];
$bookingtoken = $rows['bookingtoken'];
$insurance = $rows['insurance'];
$appointment = $rows['appointment_status'];
echo '<tr>';
echo "<td>$id</td>";
echo "<td>$name</td>";
echo "<td>$date</td>";
echo "<td>$bookingtoken</td>";
echo "<td>$insurance</td>";
echo "<td>$appointment</td>";
echo '</tr>';
}
}
Iam successfully fetching rows through php and appending response to tbody but data table is not working properly like search is not working and no of entries not working pagination is not displaying i dont knw how to solve this can anyone help me

Answer 1

If you will refer dataTables doc. Then you will find that the data from remote server must be in json format. While you are not sending data in json. That is the issue. You need to change your code as below
$result = array();
while ($rows = mysqli_fetch_assoc($query)) {
$name = $rows['name'];
$id = $rows['id'];
$date = $rows['date'];
$bookingtoken = $rows['bookingtoken'];
$insurance = $rows['insurance'];
$appointment = $rows['appointment_status'];
$result[] = array($name,$id,$date,$bookingtoken,$insurance,appointment);
}
}
echo json_encode(array("data"=>$result));
EDIT
Datatable itself giving you facility for ajax. No need to explicitly add ajax for it. Remove your ajax code and change your datatable initialization to below
$('#open').DataTable( {
"ajax": 'booked1.php'
});
Also you must have same number of th and td(number of columns must be same)

Answer 2

you can try this --- append table using json response :
<?php
if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
appointment_status as appointment_status from at_booking where date='$date'
");
$data = [];
$i=0;
while ($rows = mysqli_fetch_array($query)) {
$data[$i]['name'] = $rows['name'];
$data[$i]['id'] = $rows['id'];
$i++;
}
echo json_encode($data);
}
?>
<script>
var date = $("#date").val();
$("#open tbody > tr").remove();
$.ajax({
type: 'POST',
url: 'booked1.php',
dataType : "json",
data: {
date: date
},
cache: false,
dataType: "html",
success: function (response) {
$("#loadarModal").modal('hide');
table = '';
$.each(response,function(indx,obj){
table += '<tr>';
table += '<td>'+ obj.id +'</td>';
table += '<td>'+ obj.name +'</td>';
table += '</tr>';
});
$("tbody#booking").append(table);
}
});
</script>

Answer 3

var table = null;
$(document).ready(function() {
table = $('#example').DataTable();
AddRowsAfterFewSeconds();
});
function AddRowsAfterFewSeconds() {
setTimeout(function() {
var strTR = '<tr>' +
'<td>YYYYY Kelly</td>' +
'<td>Senior Javascript Developer</td>' +
'<td>TTTTTT</td>' +
'<td>22</td>' +
'<td>2012/03/29</td>' +
'<td>$433,060</td>' +
'</tr>' +
'<tr>' +
'<td>SSSSS Kelly</td>' +
'<td>Senior Javascript Developer</td>' +
'<td>BBBBB</td>' +
'<td>15</td>' +
'<td>2012/03/29</td>' +
'<td>$433,060</td>' +
'</tr>';
table.rows().remove();
$(strTR).each(function() {
table.row.add($(this));
});
table.draw();
}, 3000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Roomus</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
This method dynamically adds rows to the DataTable. (here simply i used the setTimeOut function instead the AJAX response). It will dynamically add rows after '3 seconds'
$(strTR).each(function() {
table.row.add($(this)).draw();
});
simply loops through all the rows after converting the plain html text to 'tr' elements, and then add to the table, and finally redraws the table after adding all rows.
I've seen option to add arrays directly to DataTable. But its not working in my code. So I added them in a loop.

Answer 4

$(document).ready(function () {
$('#booked').DataTable();
});
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="booked">
<thead>
<tr>
<th>Name</th>
<th>SurName</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>SurName</th>
</tr>
</tfoot>
<tbody>
<!-- Your Foreach loop starts here -->
<tr>
<td>Hello</td>
<td>How</td>
</tr>
<tr>
<td>Abc</td>
<td>XYZ</td>
</tr>
<!-- Your Foreach loop endshere -->
</tbody>
</table>