I am having trouble creating a drop down that can sort my search results, any help is welcome. I have tried a couple of different methods that I have found from the internet but so far none have worked (I have no doubt in my mind that it is user error as others seem to have had success using those methods.) I apologise in advance for my being new at coding.
I have put my new code into this post if you could assess it and explain to me why it is not working I would be eternally grateful to you.
<!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 © 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>
