Bu kodların tamamı aynı sayfada yer alıyor.. Ben kendim testi yapabilmek için bootstrap vs dahil ettim sizin sayfanızda zaten vardır. Sadece NPRogress dahil edebilirsiniz kendi sayfanıza.
$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$db->query('SET NAMES utf8');
if (isset($_REQUEST['action'])) {
header('Content-type: application/json');
switch ($_POST['action']) {
case 'update':
$query = $db->prepare('UPDATE deneme SET tc_no = ?, isim = ? WHERE id = ?');
$query->bindParam(1, $_POST['editEventTC'], PDO::PARAM_STR);
$query->bindParam(2, $_POST['isim'], PDO::PARAM_STR);
$query->bindParam(3, $_POST['id'], PDO::PARAM_INT);
exit(json_encode(array('status' => $query->execute())));
break;
case 'delete':
$query = $db->prepare('DELETE FROM deneme WHERE id = :id');
exit(json_encode(array('status' => $query->execute(array(':id' => (int) $_POST['id'])))));
break;
default:
$query = $db->prepare('SELECT * FROM deneme WHERE id = :id');
exit(json_encode(array('status' => $query->execute(array(':id' => (int) $_POST['id'])), 'row' => $query->fetch())));
break;
}
}<link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>TC No</th>
<th>İşlem</th>
</tr>
</thead>
<tbody>
<?php
$toku = $db->query("SELECT * FROM deneme ORDER BY id desc", PDO::FETCH_ASSOC);
if ( $toku->rowCount() ){
foreach( $toku as $row ){?>
<tr id="row_<?=$row['id']?>">
<td><?=$row['id']?></td>
<td><?=$row['isim']?></td>
<td><?=$row['tc_no']?></td>
<td>
<button data-id="<?=$row['id']?>">click me</button>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<div class="modal fade" id="acmod" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Güncelle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="editEvent" class="form-horizontal">
<input type="hidden" name="action" value="update"/>
<input type="hidden" name="id" id="dataid" value=""/>
<div class="row">
<div class="col-md-6">
<div id="edit-title-group" class="form-group">
<label class="control-label" for="isim">Ad Soyad</label>
<input type="text" class="form-control" id="isim" name="isim" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="edit-title-group" class="form-group">
<label class="control-label" for="editEventTC">Tc Numarası</label>
<input type="text" class="form-control" id="editEventTC" name="editEventTC" value="">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vaz Geç</button>
<button type="button" class="btn btn-primary">Kayıt ET</button>
<button type="button" class="btn btn-danger">SiL</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script> $(function(){
$(".btn-danger").click(function(event){
event.preventDefault();
if (confirm("Silmek istiyor musun?")) {
NProgress.start();
$.post("", {action: "delete", id: $("#dataid").val()}, function(json){
NProgress.done();
if (json.status) {
$("#row_" + $("#dataid").val()).fadeOut();
$("#acmod").modal("hide");
}
});
}
});
$(".btn-primary").click(function(event){
event.preventDefault();
NProgress.start();
$.post("", $("form").serialize(), function(){
NProgress.done();
$("#acmod").modal("hide");
});
});
$("button[data-id]").click(function(event){
event.preventDefault();
NProgress.start();
$.post("", {action: "", id: $(this).data("id")}, function(json){
NProgress.done();
$("#isim").val(json.row.isim);
$("#editEventTC").val(json.row.tc_no);
$("#dataid").val(json.row.id);
$("#acmod").modal("show");
});
});
});