在不刷新或重新加載頁面的情況下顯示更新的表格

Question

我有一個顯示我的產品列表的表格，我已經使用 jQuery 刪除產品而不重新加載頁面，但是更新的表格不會顯示，除非我刷新頁面。

我試圖通過使用不透明度來隱藏它，但它仍然不起作用..

這是我的 php 代碼

<div class="table-stats order-table ov-h">
 <table id="bootstrap-data-table" class="table ">
 <thead>
 <tr>
 <th>Image</th>
 <th>Name</th>
 <th>Availability</th>
 <th>Category</th>

 <th>Total Ordered</th>

<th>Edit</th>

<th>Delete</th>   
                          
 </tr>
 </thead>
 <tbody id="data-table">

<?php

$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");

mysqli_stmt_execute($stmt_1);

$result = mysqli_stmt_get_result($stmt_1);

while($row = mysqli_fetch_array($result)){ ?>


<div class="product">
<tr class="product">

<?php

$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";

$stmt_img = mysqli_prepare($link, $sql_img);

mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);

$param_pro_id = $row["pro_id"];
$param_limit = 1;

mysqli_stmt_execute($stmt_img);

$img_results = mysqli_stmt_get_result($stmt_img);

$image = mysqli_fetch_assoc($img_results);



?>


  <td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
  <td><?php echo $row["pro_name"]; ?></td>

<td><?php echo $row["pro_quantity"]; ?></td>
                                            
 <?php 

$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";

$stmt_category = mysqli_prepare($link, $sql_category);

mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);

$param_cat_id = $row["pro_category"];

mysqli_stmt_execute($stmt_category);

$result_category = mysqli_stmt_get_result($stmt_category);


$category = mysqli_fetch_assoc($result_category);


?>   


<td>  <?php echo $category["cat_name"]; ?>  </td>
                 

<?php

$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";

$pro_stmt = mysqli_prepare($link, $pro_ord);

mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);

mysqli_stmt_execute($pro_stmt);

$pro_res = mysqli_stmt_get_result($pro_stmt);

$pro = mysqli_fetch_array($pro_res);


?>


<td><?php echo $pro["total"]; ?></td>

       
 <td><a href="update_product.php?id=<?php echo $row["pro_id"]; ?>"><span class="badge badge-success"><i class="ti-pencil"></i></span></a>

</td>

<td>

<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>

</td>        

</tr>                                           
            
</div>                                
<?php } ?>                                    
                                            
 </tbody>
 </table>
</div>
           

這是我的 JQUERY 代碼

function delete_data(d){

    var id=d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { 
     $.ajax({

      type: "post",

      url: "products.php",

      data: {id:id},

      success: function(){

        $(this).parents(".product").animate("fast").animate({ opacity : "hide" }, "slow");

      }

    });

   }

  }

這是刪除代碼

 $pro_id =$_POST['id'];

 $delete = "DELETE FROM products WHERE pro_id= ?"; 

$results = mysqli_prepare($link, $delete); 

mysqli_stmt_bind_param($results, "i", $param_pro_id);

$param_pro_id = $pro_id;

mysqli_stmt_execute($results);
  

Answer 1

當您定位要刷新的 div 時，您需要更具體，例如：

success: function(){
    $("#div_id_you_want_refresh")
    .load("your_entire_url" + "#div_id_you_want_refresh");
}

Answer 2

您也可以在您的delete_data function 中傳遞this ，其中this指的是當前單擊的元素，即：您的按鈕。 然后，在 success function 中使用它來隱藏您的.product元素。

演示代碼：

 function delete_data(d, el) { var id = d; if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { /* $.ajax({ type: "post", url: "products.php", data: { id: id }, success: function() {*/ //use this then remove closest product tr $(el).closest(".product").animate("fast").animate({ opacity: "hide" }, "slow"); /* } });*/ } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="bootstrap-data.table" class="table"> <thead> <tr> <th>Image</th> <th>Name</th> <th>Availability</th> <th>Category</th> <th>Total Ordered</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody id="data.table"> <tr class="product"> <td><img src="../admin/assets/img/products/"></td> <td> smwthing </td> <td> 1 </td> <td> abs <td> 1222 </td> <td><a href="update_product.php?id=1"><span class="badge badge-success"><i class="ti-pencil"></i></span></a> </td> <td> <,--pass `this` inside fn--> <button class="remove badge badge-danger" onclick="delete_data('1'.this)"><i class="ti-trash">x</i></button> </td> </tr> <tr class="product"> <td><img src="../admin/assets/img/products/"></td> <td> smwthing </td> <td> 12 </td> <td> abs1 <td> 12221 </td> <td><a href="update_product?php,id=2"><span class="badge badge-success"><i class="ti-pencil"></i></span></a> </td> <td> <button class="remove badge badge-danger" onclick="delete_data('2',this)"><i class="ti-trash">x</i></button> </td> </tr> </tbody> </table>

Answer 3

我有一個顯示我的產品列表的表格，我使用 jQuery 刪除產品而不重新加載頁面，但是更新的表格不會顯示，除非我刷新頁面..

我試圖通過使用不透明度來隱藏它，但它仍然不起作用..

這是我的 php 代碼

<div class="table-stats order-table ov-h">
 <table id="bootstrap-data-table" class="table ">
 <thead>
 <tr>
 <th>Image</th>
 <th>Name</th>
 <th>Availability</th>
 <th>Category</th>

 <th>Total Ordered</th>

<th>Edit</th>

<th>Delete</th>   
                          
 </tr>
 </thead>
 <tbody id="data-table">

<?php

$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");

mysqli_stmt_execute($stmt_1);

$result = mysqli_stmt_get_result($stmt_1);

while($row = mysqli_fetch_array($result)){ ?>


<div class="product">
<tr class="product">

<?php

$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";

$stmt_img = mysqli_prepare($link, $sql_img);

mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);

$param_pro_id = $row["pro_id"];
$param_limit = 1;

mysqli_stmt_execute($stmt_img);

$img_results = mysqli_stmt_get_result($stmt_img);

$image = mysqli_fetch_assoc($img_results);



?>


  <td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
  <td><?php echo $row["pro_name"]; ?></td>

<td><?php echo $row["pro_quantity"]; ?></td>
                                            
 <?php 

$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";

$stmt_category = mysqli_prepare($link, $sql_category);

mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);

$param_cat_id = $row["pro_category"];

mysqli_stmt_execute($stmt_category);

$result_category = mysqli_stmt_get_result($stmt_category);


$category = mysqli_fetch_assoc($result_category);


?>   


<td>  <?php echo $category["cat_name"]; ?>  </td>
                 

<?php

$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";

$pro_stmt = mysqli_prepare($link, $pro_ord);

mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);

mysqli_stmt_execute($pro_stmt);

$pro_res = mysqli_stmt_get_result($pro_stmt);

$pro = mysqli_fetch_array($pro_res);


?>


<td><?php echo $pro["total"]; ?></td>

       
 <td><a href="update_product.php?id=<?php echo $row["pro_id"]; ?>"><span class="badge badge-success"><i class="ti-pencil"></i></span></a>

</td>

<td>

<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>

</td>        

</tr>                                           
            
</div>                                
<?php } ?>                                    
                                            
 </tbody>
 </table>
</div>
           

這是我的 JQUERY 代碼

function delete_data(d){

    var id=d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { 
     $.ajax({

      type: "post",

      url: "products.php",

      data: {id:id},

      success: function(){

        $(this).parents(".product").animate("fast").animate({ opacity : "hide" }, "slow");

      }

    });

   }

  }

這是刪除代碼

 $pro_id =$_POST['id'];

 $delete = "DELETE FROM products WHERE pro_id= ?"; 

$results = mysqli_prepare($link, $delete); 

mysqli_stmt_bind_param($results, "i", $param_pro_id);

$param_pro_id = $pro_id;

mysqli_stmt_execute($results);