jquery table reload after ajax call - php

Question

I am trying to reload a table instead of reloading the whole page
here is my code
<link href="assets/css/bootstrap.min.css" rel="stylesheet" >
<script src="assets/js/bootstrap.min.js"></script>
<input id="check" value="" placeholder="Enter your number here" />
<button type="button" id="go_check" class="btn btn-success" data-loading-text="Loading..." > <i class="icon-ok icon-white"></i> Check</button>
<span id="button"></span>
<br/>
<div id="response">
</div>
<script>
jQuery(document).ready(function() {
jQuery('#go_check').click(function() {
jQuery('#go_check').button('loading');
jQuery.ajax({
type: "POST",
url: "ajax.php",
data: ({
method: "check",
number: jQuery('#check').val()
}),
dataType: "json",
success: function(data) {
jQuery('#button').html(data.btn);
jQuery('#go_check').button('reset');
jQuery('#response').html(data.html);
},
failure: function(errMsg) {
jQuery('#go_check').button('reset');
alert(errMsg);
}
});
});
});
function delete_item($id) {
jQuery.ajax({
type: "POST",
url: "ajax.php",
data: ({
method: "delete",
number: $id
}),
dataType: "json",
success: function(data) {
jQuery('#button').html('');
window.location.reload(); // would like to replace this line with the table refresh
},
failure: function(errMsg) {
jQuery('#go_check').button('reset');
alert(errMsg);
}
});
}
</script>
<link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
<link href="assets/css/jquery.dataTables_themeroller.css" rel="stylesheet" media="screen">
<script src="assets/js/jquery.dataTables.min.js"></script>
<table class="table" id="tad">
<thead>
<th>
Order Id
</th>
<th>
Ticket Name
</th>
<th>
Ticket Number
</th>
<th>
Product
</th>
<th>
Model
</th>
<th>
Option Name
</th>
<th>
Option
</th>
<th>
Customer
</th>
<th>
Email
</th>
<th>
Telephone
</th>
<th>
Date
</th>
</thead>
<tbody>
<?php
include "config.php";
$con = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD);
mysql_select_db(DB_DATABASE, $con);
$result = mysql_query("select * from order_serial ", $con);
while ($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['order_id'];
echo "</td>";
echo "<td>" . $row['serial_name'];
echo "</td>";
echo "<td>" . $row['product_serial'];
echo "</td>";
echo "<td>" . $row['name'];
echo "</td>";
echo "<td>" . $row['model'];
echo "</td>";
echo "<td>" . $row['option_name'];
echo "</td>";
echo "<td>" . $row['option_value'];
echo "</td>";
echo "<td>" . $row['firstname'] . " " . $row['lastname'];
echo "</td>";
echo "<td>" . $row['email'];
echo "</td>";
echo "<td>" . $row['telephone'];
echo "</td>";
echo "<td>" . $row['date'];
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<script>
jQuery(document).ready(function() {
$('#tad').dataTable({
"sDom": 'R<"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
</tbody>
</table>
I have searched for the answer and cant seem to find one it seems a bit silly to reload the whole page instead of just the table ?

Answer 1

Here we can separate the table loading as a separate method and call it on both the go_check button click and after successful deletion of the item.
jQuery(document).ready(function() {
function loadTable(){
jQuery('#go_check').button('loading');
jQuery.ajax({
type: "POST",
url: "ajax.php",
data: ({
method: "check",
number: jQuery('#check').val()
}),
dataType: "json",
success: function(data) {
jQuery('#button').html(data.btn);
jQuery('#go_check').button('reset');
jQuery('#response').html(data.html);
},
failure: function(errMsg) {
jQuery('#go_check').button('reset');
alert(errMsg);
}
});
}
jQuery('#go_check').click(loadTable);
});
function delete_item($id) {
jQuery.ajax({
type: "POST",
url: "ajax.php",
data: ({
method: "delete",
number: $id
}),
dataType: "json",
success: function(data) {
jQuery('#button').html('');
loadTable();
},
failure: function(errMsg) {
jQuery('#go_check').button('reset');
alert(errMsg);
}
});
}

Answer 2

Use the sAjaxSource of datatables rather than seperate ajax call to ajax.php
"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"