從DataTable中刪除一行而不刷新整個頁面

Question

我是後端編程的新手。我想通過點擊我的頁面上的一個按鈕（在我的案例中是「拒絕」按鈕）從數據庫中刪除一條記錄......但是隻有刷新後纔會反映到我的網頁上。我想這是不自動刷新整個頁面..

<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

你可以找到相應的tr您發佈後，將其取下：

$(".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

爲了簡化JavaScript的一個位並以下列花哨的方式刪除該行：

1. 在你的whil Ë循環用下面的更換<tr>標籤

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

2. 現在，當行被刪除，首先檢查操作是否成功與否，然後刪除該行如下

   $.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'); 
       }); 
   });