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>

这是负责数据表和活动导航栏的脚本

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（）刷新。希望这能对您有所帮助：）

如何使表格输出仅在单击搜索按钮时出现

1 个答案: