如何在我单击搜索按钮时才显示表格输出

Question

如何在我单击搜索按钮时才显示表格输出

<?php 
require_once 'includes/header.php'; 
if ($_POST) {
    $list = $_POST['categoryList'];
        if ( $list != "") {
            $sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROm product 
            INNER JOIN category on product.category_id = category.category_id 
            WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
            $result = $connect ->query($sql);
        }
            /*else{
                $msg = echo 'Select category';
    }*/

}    
?>

这里我正在运行一个php脚本来从数据库表产品中提取数据

<div class="row">
    <div class="col-md-12">
<div class="card mt-5" style="width: 30rem; margin-left: 25%" >
              <div class="card-header bg-dark text-light"><span class="glyphicon glyphicon-th-list"></span> Categories </div>
              <div class="card-body">
                    <form action="" method="post" enctype="multipart/form-data">
                        <div class="form-group row mt-5 ml-5">
                            <label for="categoryList" class="col-sm-8 col-form-label">Category Name</label>
                            <div class="col-sm-8">
                              <select class="form-control" id="categoryList" name="categoryList">
                                <option value="">--Select--</option>
                                <?php
                                $sql= "SELECT category_id, category_name FROM category where category_status = 1 AND category_status = 1";
                                $result =$connect->query($sql);

                                while ($row = $result->fetch_array()) {
                                    echo '<option value="'.$row[0].'">'.$row[1].'</option>';
                                }
                                ?>                              
                              </select>
                            </div>
                    </div>
                          <div class="col">
                            <button type="submit" onclick="myFunction()" class="btn btn-dark" id="searchButton" style="margin-left: 100px">Search </button>
                        </div>
                    </form>



                </div>

这是我选择从数据库中提取的类别的部分

</div>      
</div>
</div>
<div id="myDiv">
    <table class="table" id="myTable">
        <thead class="thead thead-dark">
        <th>Photo</th>
                            <th>Name</th>
                            <th>Category</th>
                        </thead>

                        <tbody>
                                <?php

                                @$sql = "SELECT product.product_name, product.product_image, product.category_id, product.active, category.category_name FROM product 
                                    INNER JOIN category on product.category_id = category.category_id 
                                    WHERE product.category_id = '".$_POST['categoryList']."' AND product.active = 1";
                                    $result = $connect ->query($sql);

                                    while($row = $result->fetch_assoc())
                                    {
                                        $imageUrl = substr($row['product_image'], 3);

                                        $name = $row['product_name'];
                                        $category = $row['category_name'];

                                ?>

                        <tr>
                            <td><?php echo '<img class="img-round" src='.$imageUrl.' style="height:30px; width:50px;">'?></td>
                            <td><?php echo $name?></td>
                            <td><?php echo $category?></td>
                        </tr>
                    <?php } ?>
                        </tbody>                    
</table>    
</div>

这是在上面所选类别中显示产品的表格

<script>
    $("#navDashboard").addClass('active'); 
    $("#myTable").DataTable();
</script>

这是对DATATABLE和ACTIVE NAVBAR负责的脚本

Answer 1

通常我正在做的是使用ajax。 给你的表格一个id。 例如，在提交按钮后调用ajax

  $(document).on('submit', '#show_table', function () { event.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ type: 'POST', url: 'your_file.php', data: formData, async: false, cache: false, contentType: false, processData: false, success: ( function (formData) { $(".result").html(formData) } ) }); }); 

在URL中传递将进行调用的文件的名称（创建一个新文件）。 搜索输入中的值将在POST TYPE中传递，然后运行查询。 正如您所看到的，结果将显示在带有结果类的div中。 所以在搜索页面中创建一个div

那张桌子会出现在那里。 不会根据event.preventDefault（）;刷新页面; 希望这能给你任何帮助:)