Supprimer une ligne de DataTable sans actualiser la page entière

Question

Je suis nouveau dans la programmation backend. J'ai trouvé un moyen de supprimer un enregistrement de la base de données au clic d'un bouton (bouton "Rejeter" dans mon cas) sur ma page ... Cependant, il ne se reflète sur ma page Web qu'après l'actualisation. Je veux que ce soit automatique sans rafraîchir la page entière ..

<script> 
     $(".del").click(function() { 
     $.post("admin_delete.php", { reqidno:$(this).attr("id") }) 
     .done(function(data) { 
     alert(data); 
     }); 
     }); 
</script> 
<div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12" style="color: white;"> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle" style="float:left;">Menu</a>&nbsp;&nbsp; 
        <br> 
        <br> 
        <div class="panel" style="color:black; padding-left: 15px; padding-top: 10px;"> 
        <table class="table table-hover table-bordered" id="regtable"> 
         <col width="40"> 
         <col width="130"> 
         <col width="60"> 
         <col width="80"> 
         <col width="100"> 
         <col width="140"> 
         <thead> 
          <tr> 
          <th>Admn no.</th> 
          <th>Name</th> 
          <th>Class</th> 
          <th>Contact</th> 
          <th>E-mail</th> 
          <th>Verify/Reject</th> 
          </tr> 
         </thead> 
        <tbody>  
        <?php 
$query="SELECT * FROM members WHERE verify = ''"; 
$result = mysqli_query($conn, $query) or die(mysqli_error($conn)); 

if ($result->num_rows > 0) { 

    while($row = $result->fetch_assoc()) { 
     echo'<tr>'; 
     echo'<td>',$row["ID"],'</td>'; 
     echo'<td>',$row["name"],'</td>'; 
     echo'<td>',$row["class"],'</td>'; 
     echo'<td>',$row["phone"],'</td>'; 
     echo'<td>',$row["email"],'</td>'; 
     echo'<td style="padding-right:0px;">','<button class="btn btn-danger del" id="',$row["ID"],'" name="reject" onclick="delete()">Reject</button>','</td>'; 
     echo'</tr>'; 
    } 
} 
else 
    echo 'No records for approval'; 

?> 
     </tbody> 
</table> 




        </div> 
       </div> 
      </div> 
     </div> 
</div>   

Answer 1

Vous pouvez trouver le correspondant tr après que vous publiez et retirez-le:

$(".del").click(function() { 
    var id = $(this).attr("id") 
    $.post("admin_delete.php", { reqidno: id }) 
    .done(function(data) { 
    alert(data); 
    // find the clicked button 
    // take the closest 'tr' and remove it 
    $("#"+id).closest('tr').remove(); 
}); 
}); 

Answer 2

Pour simplifier le JavaScript un peu et retirez la rangée de façon fantaisie de la façon suivante:

1. boucle e remplacer la balise <tr> avec ce qui suit

   echo'<tr id="row'.$row["ID"].'">';

2. Maintenant, lorsque la ligne est supprimée, vérifiez d'abord si l'action a réussi ou non, puis retirer la ligne comme suit

   $.post("admin_delete.php", { reqidno:$(this).attr("id") }) 
        .done(function(data) { 
        if(data=='success'){ 
        //set an indicator for success, you can send 
        //echo 'success' from  admin_delete.php 
   
        $("#row"+id).slideUp('slow',function(){$(this).remove()}); 
   
        }else alert('Failed To Delete'); 
       }); 
   });