从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. 在您的while循环中，将<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'); }); });