Question

我无法创建可以对搜索结果进行排序的下拉菜单，欢迎任何帮助。我尝试过从互联网上找到的几种不同的方法，但到目前为止还没有一种方法有效（我毫不怀疑这是用户错误，因为其他人似乎已经成功使用这些方法。）我提前道歉因为我是新编码。

如果你可以评估它并向我解释为什么它不起作用，我已将我的新代码放入这篇文章中我会永远感激你。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Jenewan Pets</title>
        <link rel="icon" type="image/gif/png" href="img/Logo.png"/>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
      </head>
      <body>
        <body background="img/bckgrnd.png">
        <div id="container">
            <div id="header">
              <img src="img/Header.png" style="position: absolute; top: 0px;"/>
              <h1>
              <img src="img/logo.png" alt="logo" height="100px" width="100px"  border="0px" style=position:relative; />
              <div class="box">
                <div class="container-1">
                    <form method="get" action="searchresults11.php" id="searchForm">
                    <input type="text" id="searchBox" name="q" placeholder="Let's Sniff it Out...">
                      <div class="search-icon">
                        <img class="search-icon" img src="img/PawSearch.png" width="18" height="18" alt="search icon" />
                      </div>
                </div>
              </div>
            </h1>
        </div>
    <div id="content">
          <div id="nav">
          <ul>
                  <li><a class="selected" href="/index.php">Home</a></li>
                  <li><a href="dogs.php">Dogs</a></li>
                  <li><a href="">Cats</a></li>
                  <li><a href="birds.php">Birds</a></li>
                  <li><a href="">Reptiles/Exotic</a></li>
                  <li><a href="">Aquatics</a></li>
              </ul>
            </div>
          <div id="Results">
            <h2>We sniffed and we found...</h2>
            <?php
            $con=mysqli_connect("localhost","root","","catalog");
            // Check connection
            if (mysqli_connect_errno())
            {
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
            }

            if(isset($_GET['q'])){
              $searchq = $_GET['q'];
              }
            $q = mysqli_query($con,"SELECT * FROM final_dog_catologue_full where
            keywords LIKE '%$searchq%' OR brand LIKE '%$searchq%' OR name LIKE '%$searchq%' LIMIT 0, 40") or
            die(mysqli_error("Sorry we lost the scent..."));

            echo "<table border='2'>
            <tr>
            <th>  </th>
            <th id='Name_Header'>Item Name</th>
            <th>Brand</th>
            <th id='Price_Header'>Price</th>
            </tr>";

            while($row = mysqli_fetch_array($q))
            {
            echo "<tr>";
            echo "<td><img src='img/".$row['Picture']."'></td>";
            echo "<td headers='Name_Header'>" . $row['Name'] . "</td>";
            echo "<td headers='Brand'>" . $row['Brand'] . "</td>";
            echo "<td headers='Price_Header'>£" . $row['Retail_Price_With_Delievery'] . "</td>";

            echo "</tr>";
            }
            echo "</table>";


            mysqli_close($con);
    ?>

    <script type="text/javascript">

    var table = $('table');

       $('#Name_Header, #Price_Header')
           .wrapInner('<span title="sort this column"/>')
           .each(function(){

               var th = $(this),
                   thIndex = th.index(),
                   inverse = false;

               th.click(function(){

                   table.find('td').filter(function(){

                       return $(this).index() === thIndex;

                   }).sortElements(function(a, b){

                       return $.text([a]) > $.text([b]) ?
                           inverse ? -1 : 1
                           : inverse ? 1 : -1;

                   }, function(){

                       // parentNode is the element we want to move
                       return this.parentNode;

                   });

                   inverse = !inverse;

               });

           });
           </script>

           </div>
        </div>
        <div id="footer">
            Copyright &copy; 2017 Jenewan Pets

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



      </body>
    </html>

如何使用下拉菜单在搜索表中对结果进行排序？

0 个答案: