Hi Guys,
OK I'll admit it from the off I'm a complete PHP newbie, but I'm willing to learn. Here's what I've got so far...
I have a search form which is being updated using an AJAX call. So far so good, but my boss would like it so that the search results would be filtered down based on whatever drop-down menu the user selects in addition to the initial selected drop-down menu.
For example if a user selects a Subject >> Tutor the results should show the initial subject, but then filter it further by tutor and so on. If the user selects Tutor >> Center the results should show the initial tutor, but then filter it further by center, etc.
Also my boss would like pagination to show at the bottom of the search results. I have a variable called $limit_results which should limit the page results to a set number, but it's not working for some reason, the pagination should print out the total number of items as well as the number of pages like Google has on it's pages.
For example:
"Search found 250 results. Showing 1 page of 25. < Previous | Next >" or something along those lines.
The main issue I have is when the user clicks on the page variable, the form loses it's selected drop-down choice. I would prefer to use a temporary browser cookie if a cookie is necessary.
Here's what I've got so far:
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-HK" />
<title>Cantab Education: Timetable</title>
<script type="text/javascript">
function showCourse(search, key)
{
if (search == "") {
document.getElementById("dynamic_display").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "search.php?key="+ key +"&search=" + search, true);
xmlhttp.send();
}
</script>
<style type="text/css">
body {
font-size: 0.75em;
margin: 0px;
padding: 0px;
}
table#search {
border-collapse: collapse;
margin: auto;
width: 1000px;
}
table#search tr th {
border: solid #000000 1px;
}
table#results {
border-collapse: collapse;
margin: auto;
width: 1000px;
}
table#results tr th {
background-color: #00561c;
border: solid #000000 1px;
color: #ffffff;
}
table#results tr td {
border: solid #000000 1px;
text-align: center;
}
</style>
</head>
<body>
<form>
<table id="search">
<tr>
<th>
<select name="subject" onchange="showCourse(this.value, 'Subject');">
<option selected="selected" value="">Subject:</option>
<option value="A%20Math">A Math</option>
<option value="BAFS(A)">BAFS(A)</option>
<option value="BAFS(Acc)">BAFS(Acc)</option>
</select>
</th>
<th>
<select name="tutor" onchange="showCourse(this.value, 'Tutor');">
<option selected="selected" value="">Tutor:</option>
<option value="A.Yiu">A. Yiu</option>
<option value="Alan%20x%20Cars">Alan x Cars</option>
<option value="Ally">Ally</option>
</select>
</th>
<th>
<select name="level" onchange="showCourse(this.value, 'Level');">
<option selected="selected" value="">Level:</option>
<option value="Form%201">Form 1</option>
<option value="Form%202">Form 2</option>
<option value="Form%203">Form 3</option>
</select>
</th>
<th>
<select name="type" onchange="showCourse(this.value, 'Course Type');">
<option selected="selected" value="">Type:</option>
<option value="Summer">Summer</option>
<option value="Regular">Regular</option>
</select>
</th>
<th>
<select name="center" onchange="showCourse(this.value, 'Primary Center');">
<option selected="selected" value="">Center:</option>
<option value="CB%20-%20Cantab%20Education%20Centr%20(Causeway%20Bay)">Causeway Bay</option>
<option value="FT%20-%20Cantab%20Education%20Centr%20(Fo%20Tan)">Fo Tan</option>
<option value="HH%20-%20Cantab%20Education%20Center%20(Hung%20Hom)">Hung Hom</option>
</select>
</th>
</tr>
</table>
</form>
<div id="dynamic_display"></div>
</body>
</html>search.php
<?php
error_reporting(E_ALL & ~E_NOTICE);
require_once('includes/MagicParser.php');
$key = $_GET['key'];
$search = $_GET['search'];
if (!$_GET['page']) {
$page = 1;
} else {
$page = $_GET['page'];
}
$total_items = 0;
$limit_results = 10;
$counter = 0;
function recordCounter($record)
{
global $total_items;
$total_items ++;
}
function recordHandler($record)
{
global $key;
global $search;
global $page;
global $limit_results;
global $counter;
$counter ++;
if ($counter <= (($page - 1) * $limit_results)) return false;
if($record[$key] == $search) {
print "<tr>";
print "<td>".$record['Subject']."</td>";
print "<td>".$record['Tutor']."</td>";
print "<td>".$record['Level']."</td>";
print "<td>".$record['Course Type']."</td>";
print "<td>".$record['Course Code']."</td>";
print "<td>".$record['Primary Center']."</td>";
print "<td>".$record['Lesson 1 Date']."</td>";
print "<td><a href=\"#\">IMG</a></td>";
print "<td><a href=\"#\">IMG</a></td></td>";
print "</tr>";
} else {
return;
}
return ($counter == ($page * $limit_results));
}
print "
<table id=\"results\">
<tr>
<th>Subject</th>
<th>Tutor</th>
<th>Level</th>
<th>Type</th>
<th>Code</th>
<th>Center</th>
<th>Date</th>
<th>Timetable</th>
<th>Outline</th>
</tr>
";
MagicParser_parse("includes/course-data.csv", "recordCounter");
MagicParser_parse("includes/course-data.csv", "recordHandler");
print "
</table>
";
$total_pages_count = ($total_items / $limit_results);
$total_number_pages = number_format($total_pages_count, 0);
if (($page == 1) && ($total_number_pages > 1)) {
print "<a href='?page=" . ($page + 1) . "'>Page " . ($page + 1) . "</a>";
} elseif ($page < $total_number_pages) {
print "<a href='?page=" . ($page - 1) . "'>Page " . ($page - 1) . "</a> | <a href='?page=" . ($page + 1) . "'Page " . ($page + 1) . "</a>";
} else {
print "<a href='?page=" . ($page - 1) . "'>Page " . ($page - 1) . "</a>";
}
?>