Нумерация страниц начальной загрузки не отражается в таблице при удалении строк
У меня есть таблица начальной загрузки с нумерацией страниц и кнопкой удаления в каждой строке. В этой таблице у меня есть 10 строк на каждой странице. Если я нажму кнопку "Удалить" на странице 1, данные следующей страницы должны появиться на первой странице, чего не происходит с моим кодом. Ниже приведены мои файлы HTML и Javascript, которые я пробовал.
<div class="container">
<div class="body">
<div class="content">
<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>S.N.</th>
<th>Name</th>
<th>Address</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
$sn = 1;
foreach ($rows as $result) {
?>
<tr id=<?= $result['address_id'];?>>
<td><? echo $sn++; ?></td>
<td><? echo $result['Name'] ?></td>
<td><? echo $result['Address'] ?></td>
<td>
<?php echo delete_btn('delete.php?id=',$result['address_id']); ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable();
$('.dataTables_length').hide();
$('#example tbody').on('click', '.btn-danger', function(event){
event.preventDefault();
var row = $(this).closest('tr');
var id = row.attr('id');
$.alert({
title: 'Alert!',
content: 'Are you sure you want to delete data?',
buttons: {
Yes: function() {
$.post('delete.php',{'address_id':id},function(data){
if(data.success==true){
setTimeout(function() {
var siblings = row.siblings();
row.remove();
siblings.each(function(index) {
$(this).children().first().text(index+1);
});
}, 100);
}
},'json');
},
No: function() {
}
}
});
});
});
</script>