This tutorial will help you to understand, how to refresh a HTML table without refresh the whole page AJAX.
By using ajax we can fetch a data dynamically from the database or a table data.
In the below example i am fetch the table data dynamically.
get_table.php
<?php
$contents = '<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Tum</td>
<td>Deo</td>
</tr>
</tbody>
</table>';
echo json_encode($contents);
?>
index.html
<!DOCTYPE html>
<html>
<title>Ajax Without Refresh</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<button class="refresher">Refresh table</button>
<table id="table-to-refresh">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.refresher', function () {
$.ajax({
url: 'get_table.php',
method: "GET",
dataType: 'json',
success: function(response) {
$('#table-to-refresh').html(response);
}
});
});
});
</script>
</body>
</html>
You have learnt how to fetch data dynamically from the database or a table data.