AJAX HTML Javascript jQuery PHP Example MORE Videos New

How to refresh a HTML table without refresh the whole page AJAX


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>