php - 添加按价格排序和按名称排序

Question

我创建了一个销售组件的网站。每个组件有 9 个产品。我如何添加一个下拉按钮来安排按价格或名称显示的产品？

    <?php
 $query = "SELECT * FROM products ORDER BY id ASC";
 $result = mysqli_query($connect, $query);
 if(mysqli_num_rows($result) > 0)
 {
 while($row = mysqli_fetch_array($result))
 {
 ?>
 <div class="col-md-4">
 <form method="post" action="shop.php?action=add&id=<?php echo $row["id"]; ?>">
 <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
 <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
 <img src="<?php echo $row["image"]; ?>" class="img-responsive">
 <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
 <div class="col-xs-8">
 <input type="text" name="quantity" class="form-control" value="1">

 </div>
 <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
 <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
 <input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">

 </div>
 </form>
 </div>
 <?php
 }
 }
 ?>

 <?php
 }
 ?>
 </div>
 </div>

Answer 1

Perhaps you could use Javascript as well and add a few select boxes to give Users the chance to choose the Attribute they want to sort by and also the Direction of the Sorting as in ASC or DESC. The Code Snippet below might shed some light:

<?php
    $query      = "SELECT * FROM products ORDER BY id ASC";
    $result     = mysqli_query($connect, $query);

    // CREATE VARIABLES TO HOLD THE SELECT OPTIONS VALUES FOR THE SORTING...
    $sortParam1 = 'price';
    $sortParam2 = 'name';
    $sortDir1   = 'ASC';
    $sortDir2   = 'DESC';

    // START BUILDING THE OUTPUT...
    $output     = "<div class='col-md-12'>";         //<== WRAPPER FOR SORING & DIRECTION BOXES
    $output    .= "<form method='post' action='' id='sorting_form'>"; //<== FORM FOR THE SORTING: SUBMITS TO SAME SCRIPT

    // SORTING
    $output    .= "<div class='col-md-6'>";
    $output    .= "<select name='sorting' id='sorting'class='form-control'>";
    $output    .= "<option value='id'>Sorting</option>";
    $output    .= "<option value='{$sortParam1}'>{$sortParam1}</option>";
    $output    .= "<option value='{$sortParam2}'>{$sortParam2}</option>";
    $output    .= "</select>";
    $output    .= "</div>";

    // DIRECTION
    $output    .= "<div class='col-md-6'>";
    $output    .= "<select name='direction' id='direction'class='form-control'>";
    $output    .= "<option value='ASC'>Sort Direction</option>";
    $output    .= "<option value='{$sortDir1}'>{$sortDir1}</option>";
    $output    .= "<option value='{$sortDir2}'>{$sortDir2}</option>";
    $output    .= "</select>";
    $output    .= "</div>";

    $output    .= "</form>";        //<== CLOSE SORTING FORM...
    $output    .= "</div>";         //<== CLOSE WRAPPER...
    $rowData   = "";

    // WE USE JQUERY BELOW TO SUBMIT THE SORTING FORM ONCE USER
    // SELECTS ANY OPTION FROM.... SO WE NOW HANDLE THAT SCENARIO HERE USING PHP
    if(isset($_POST['sorting']) || isset($_POST['direction']) ){
        $sortDirection  = isset($_POST['direction'])    ? $_POST['direction']   : $sortDir1;    // DEFAULTS TO ASC
        $sortField      = isset($_POST['sorting'])      ? $_POST['sorting']     : 'id';         // DEFAULTS TO id

        $query          = "SELECT * FROM products ORDER BY {$sortField} {$sortDirection}";
        $result         = mysqli_query($connect, $query);
    }

    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result))   {
            // USE HEREDOC TO CAPTURE THE DATA WITHIN THE LOOP...
            $rowData  .=<<<R_DATA
            <div class="col-md-4">
                <form method="post" action="shop.php?action=add&id={$row["id"]}">
                    <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                        <h5 class="text-info">{$row["p_name"]}</h5>
                        <img src="{$row["image"]}" class="img-responsive">
                        <h5 class="text-danger">\$ {$row["price"]}</h5>
                        <div class="col-xs-8">
                            <input type="text" name="quantity" class="form-control" value="1">
                        </div>
                        <input type="hidden" name="hidden_name" value="{$row["p_name"]}">
                        <input type="hidden" name="hidden_price" value={$row["price"]}">
                        <input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
                    </div>
                </form>
            </div>
R_DATA;

        } // CLOSE WHILE LOOP
    } // CLOSE IF CONDITIONAL LOGIC

    // ADD THE DATA GATHERED FROM WHILE LOOP ($rowData) TO THE OUTPUT: $output
    $output  .= $rowData;
    $output  .= "</div>\n</div>";  // THESE APPEAR IN YOUR CODE BUT SEEM IRRELEVANT HERE...

    //  DISPLAY THE OUTPUT
    echo $output;

?>
<!-- ENTER JAVASCRIPT: JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function(e){
            var sortForm        = $("#sorting_form");
            var sortBox         = $("#sorting");
            var directionBox    = $("#direction");
            var bothBoxes       = sortBox.add(directionBox);

            // IF EITHER OF THE SORTING OR DIRECTION IS CHANGED
            // JUST SUBMIT THE FORM
            bothBoxes.on("change", function(evt){
                sortForm.submit();
            });

        });
    })(jQuery);
</script>