Untitled

<!DOCTYPE html>
<html>

<head>
	<title>jQuery UI Datepicker and Filterer</title>


	<!-- jQuery -->
	<script src="jquery/jquery-1.11.1.js"> </script>

	<!-- jPList Core -->
	<link href="jquery-ui-bundle/css/jplist-core.min.css" rel="stylesheet" type="text/css" />
	<script src="jquery-ui-bundle/js/jplist-core.min.js"></script>

	<!-- jQuery UI Bundle -->
	<link href="jquery-ui-bundle/css/jplist-jquery-ui-bundle.min.css" rel="stylesheet" type="text/css" />
	<script src="jquery-ui-bundle/js/jplist.jquery-ui-bundle.min.js"></script>

 	<!-- Stylesheet -->
	<link type="text/Style" href="filter.css" rel="stylesheet"/>
</head>

<body>
	<div id="header">
		<div class="logo">
		<img src="ss_logo_motto_gety_white_01.png">
		</div>
	</div>

	<div id="wrapper">


		<div id="nav">

		</div>
		<div id="content">
		<div id="inputfield">
			<label for="filter">Filter</label>
			<input id="filter" type="search" placeholder="Search" autofocus name="Search">
			<label for="dateFr">From</label>
			<input id="dateFr" type="text" placeholder="DD/MM/YYYY" name="From">
			<label for="dateTo">To</label>
			<input id="dateTo" type="text" placeholder="DD/MM/YYYY" name="To">
		</div>
			<?php

			// Connect to database
				mysql_connect('localhost', 'root', 'root');
				mysql_select_db('CSV_DB');

					echo"<table>
					<thead>
						<tr>
							<th>#</th>
							<th>Date of Order</th>
							<th>Order Number</th>
							<th>Reseller</th>
							<th>Distributor</th>
							<th>Customer</th>
							<th>Country</th>
							<th>Product</th>
							<th>Quantity</th>
							<th>Price of Unit</th>
							<th>Total Price</th>
							<th>Currency</th>
							<th>Total in SEK</th>
						</tr>
						</thead>";

					$sql = mysql_query("SELECT
						ID,
					 ORDER_DATE,
					  ORDER_NUMBER,
					   RESELLER,
					    DISTRIBUTOR,
					     CUSTOMER,
					      COUNTRY,
					       PRODUCT,
					 QUANTITY,
					 UNIT_PRICE,
					 TOTAL_PRICE,
					 CURRENCY,
					 TOTAL_SEK
					 FROM `TBL_NAME` ORDER BY `ID` ");

					while($rest = mysql_fetch_assoc($sql))
					{
						if($i++ % 2)
						{
							echo "<tr class='even'>";
							echo "<td>$rest[ID]</td>";
							echo "<td>$rest[ORDER_DATE]</td>";
							echo "<td>$rest[ORDER_NUMBER]</td>";
							echo "<td>$rest[RESELLER]</td>";
							echo "<td>$rest[DISTRIBUTOR]</td>";
							echo "<td>$rest[CUSTOMER]</td>";
							echo "<td>$rest[COUNTRY]</td>";
							echo "<td>$rest[PRODUCT]</td>";
							echo "<td>$rest[QUANTITY]</td>";
							echo "<td>$rest[UNIT_PRICE]</td>";
							echo "<td>$rest[TOTAL_PRICE]</td>";
							echo "<td>$rest[CURRENCY]</td>";
							echo "<td>$rest[TOTAL_SEK]</td> </tr>";
						} else {

							echo "<tr class='odd'>";
							echo "<td>$rest[ID]</td>";
							echo "<td>$rest[ORDER_DATE]</td>";
							echo "<td>$rest[ORDER_NUMBER]</td>";
							echo "<td>$rest[RESELLER]</td>";
							echo "<td>$rest[DISTRIBUTOR]</td>";
							echo "<td>$rest[CUSTOMER]</td>";
							echo "<td>$rest[COUNTRY]</td>";
							echo "<td>$rest[PRODUCT]</td>";
							echo "<td>$rest[QUANTITY]</td>";
							echo "<td>$rest[UNIT_PRICE]</td>";
							echo "<td>$rest[TOTAL_PRICE]</td>";
							echo "<td>$rest[CURRENCY]</td>";
							echo "<td>$rest[TOTAL_SEK]</td></tr>";
						}
					}

					 echo "</table>";

					mysql_close();
			?>
		</div>

	</div>

</body>

<script>

	// Search Filter
	$(document).ready(function(){
	    $("#filter").keyup(function(){

	        // Retrieve the input field text
	        var filter = $(this).val();

	        // Loop through the comment list
	        $("tbody tr").each(function(){

	            // If the list item does not contain the text phrase fade it out with a millisecond delay
	            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
	                $(this).fadeOut(1);

	            // Show the list item if the phrase matches
	            } else {
	                $(this).show();
	            }

       		 });
   		});
	});


		//Used to highligt hovered table rows
		$('tbody tr').hover(function(){
		  $(this).find('td').addClass('hovered');
		}, function(){
		  $(this).find('td').removeClass('hovered');
		});

</script>


</html>