从DataTable中删除行而不刷新整个页面

时间:2016-03-03 14:42:50

标签: javascript jquery html css

我是后端编程的新手。我找到了一种方法,可以在我的页面上点击按钮(在我的情况下为“拒绝”按钮)从数据库中删除记录...但是只有在刷新后它才会反映到我的网页上。我想要它是自动的而不刷新整个页面..

<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>        

2 个答案:

答案 0 :(得分:5)

发布并删除后,您可以找到相应的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();
 });
});

答案 1 :(得分:0)

为了简化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');
       });
     });