I make a project that need datatables, I already done it. But now I need to reload datatables when I enter a new parameter to show a new record.
This is the first time I load before I enter ID:
This is after I enter ID:
I need to change the record in datatables to new ID without reloading the page (just the datatables)
But the new record shown above the datatables.
This my index.php
<?php
include "db.php";
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/datepicker/css/bootstrap-datepicker3.css"/>
</head>
<body>
<center>
<h1>Tabel SPTA<br><?php echo $obj->get_hari();
echo "<br>".$obj->kd = 'AA002';?></h1>
</center>
<br/>
<br/>
<form>
<input type="text" id="id" placeholder="Enter Your ID .."/><br/>
<input type="button" value="Submit" onclick="post();" ><br/>
</form>
<div class="container-fluid">
<div class="table-responsive">
<table border = '0' class="table table-striped table-bordered data" id="tabelSpta">
<thead>
<tr>
<th>No.</th>
<th>Kode_KT</th>
<th>Nama_KT</th>
</tr>
</thead>
<tbody>
<div id="ganti">
<?php $obj->tampil_data($obj->kd); ?>
</div>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function post() {
var id = $('#id').val();
$.post('db.php',{postid :id},
function(data){
document.getElementById("ganti").innerHTML = data;
});
}
</script>
</body>
<script type="text/javascript">
$(document).ready(function(){
var tabel = $('.data').DataTable();
});
</script>
<script src="assets/datepicker/js/bootstrap.js"></script>
<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tanggal').datepicker({
format: "dd-mm-yyyy",
autoclose:true
});
});
</script>
</html>
This is my db.php
<?php
class x{
function koneksi(){
$serverName = "DESKTOP-49HH41E\SA";
$conn = new PDO("sqlsrv:server=$serverName; Database=tebu", "sa", "sa12345");
return $conn;
}
function get_hari(){
date_default_timezone_set('Asia/Jakarta');
return date("j F Y G:i:s");
}
function KueriSql($id){
$query = "SELECT TOP 1000 * FROM [dbo].[vM_KEL]
WHERE KD_KT ='".$id."'";
$stmt = $this->koneksi()->prepare($query);
$stmt->execute();
$hasil = $stmt->fetchAll();
return $hasil;
}
public $arr = array();
public $arrX=0;
public $kd;
function tampil_kueri($id){
foreach ($this->KueriSql($id) as $row) {
$this->arr[$this->arrX][0] = $this->arrX;
$this->arr[$this->arrX][1] = $row['KD_KT'];
$this->arr[$this->arrX][2] = $row['KETUA'];
$this->arrX++;
}
}
function tampil_data($id){
$this->tampil_kueri($id);
for ($baris=0; $baris < $this->arrX; $baris++) {
echo "<tr>";
for ($kolom=0; $kolom < 3; $kolom++) {
echo "<td>".$this->arr[$baris][$kolom]."</td>";
}
echo "</tr>";
}
}
}
$obj = new x();
$id='';
if (isset($_POST['postid'])) {
$id = $_POST['postid'];
$obj->tampil_data($id);
}else{
$obj->tampil_data($id);
}
?>
