Using this example: http://www.w3schools.com/php/php_ajax_database.asp
I have set up a table echoing from database.
I am now trying to initiate datatables plugin on the table, everything is set up correctly but it wont work. I have tried to initiate the datatable in the html and the php pages but neither seem to work.
I am similarly having the same problem incorporating this example:
http://davidwalsh.name/animated-ajax-jquery
Is it this bit from the first example causing the issue as the page has already loaded before xmlhttp.open and xmlhttp.send(); is sent.
xmlhttp.open("GET","getuser.php?username="+username+"&year="+str,true);
xmlhttp.send();
head
$(document).ready(function() {
$('a.delete').click(function(e) {
e.preventDefault();
var parent = $(this).parent();
$.ajax({
type: 'get',
url: 'jquery-record-delete.php',
data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
jQuery( function( $ ) {// Implements the dataTables plugin on the HTML table
var $adtTable= $("#academic_days_table").dataTable({
"iDisplayLength": 30,
"sDom": '<"clear">t>',
"aaSortingFixed": [[0,'asc']],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
]
});
});
HTML page
function showUser(str, username)
{
if (str=="")
{
document.getElementById("department_logs_txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("department_logs_txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?username="+username+"&year="+str,true);
xmlhttp.send();
}
<form>
<select id="employee_user">
<option value="">--</option>
</select>
<select id="they" onchange="showUser(this.value, employee_user.value)">
<option value="">--</option>
</select>
</form>
php page
<?php
include_once("scripts/connection.php");
$year = $_GET["year"];
$username = $_GET["username"];
$is_academic_result = mysql_query('SELECT * FROM holiday_entitlement_academic WHERE employee = \'' . $username . '\' AND academic_year = \'' . $year . '\' ');
if($is_academic = mysql_fetch_array($is_academic_result)) {
echo'<div style="float:left; width:400px;">';
echo'<table width="100%">
<tr>
<td><strong>Name:</strong></td>
<td>'.$is_academic['employee'].'</td>
</tr>
<tr>
<td><strong>Entitlement:</strong></td>
<td>'.$is_academic['entitlement'].' '.$is_academic['units'].'</td>
</tr>
<tr>
<td><strong>Department / Division:</strong></td>
<td>'.$is_academic['division'].'</td>
</tr>
<tr>
<td><strong>Line Manager:</strong></td>
<td>'.$is_academic['line_manager'].'</td>
</tr>
</table>';
echo'<br/>';
echo'</div>';
echo'<table class="dataTable" id="academic_days_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<th>Start Date</th>
<th>End Date</th>
<th>'.$is_academic['units'].' to be taken</th>
<th>'.$is_academic['units'].' remaining</th>
<th></th>
</thead>';
echo '<tr>';
echo '<td>-</td>';
echo '<td>-</td>';
echo '<td>-</td>';
echo '<td>'.$is_academic['entitlement'].'</td>';
echo '<td></td>';
echo '</tr>';
$input = $is_academic['entitlement'];
}
else {echo 'You currently dont have a record for this academic year. ';}
//$requests_result = mysql_query('
//SELECT *
//FROM holiday_entitlement_business_manual
//LEFT JOIN requests ON holiday_entitlement_business_manual.employee = requests.employee
//WHERE employee = \'' . $username . '\' AND academic_year = \'' . $acyear . '\' ');
$requests_result = mysql_query('SELECT * FROM requests WHERE employee = \'' . $username . '\' AND approved = 1 AND academic_year = \'' . $year . '\' ORDER BY start_date ASC');
$remainder = 0;
while($requests = mysql_fetch_array($requests_result)) {
$remainder = ($remainder == 0) ? $input : $remainder;
$out = $remainder - $requests['days'];
if($out < 0){
break;
}
$remainder = $out;
echo'<tr>';
echo'<td>'.$requests['start_date'].'</td>';
echo'<td>'.$requests['end_date'].'</td>';
echo'<td>'.$requests['days'].'</td>';
echo'<td>'.$remainder.'</td>';
echo'<td><a href="?delete='.$requests['id'].'" class="delete"><img src="images/cross.png"></a></td>';
echo'</tr>';
}
echo'</table>';
?>
include the script in xmlhttp.onreadystatechange=function()
Datatables is now loaded and $(‘a.delete’).click(function(e) {} is working
Here is an example: