I have the pagination portion working as I would like it, but I am unsure of how to get the 2 html dropdown menus to filter content down further, to show the content that is only relevant to the stuff selected with an onChange event.
I have included my entire page below with all relevant code.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var current_page = 1;
var records_per_page = 2;
var objJson = [
{ first_name: "User 1",last_name: "Last 1",roll_number: "0",year: "Freshman"},
{ first_name: "User 2",last_name: "Last 2",roll_number: "0",year: "Freshman"},
{ first_name: "User 3",last_name: "Last 3",roll_number: "2",year: "Teacher"},
{ first_name: "User 4",last_name: "Last 4",roll_number: "2",year: "Teacher"},
{ first_name: "User 5",last_name: "Last 5",roll_number: "2",year: "Professor"},
{ first_name: "User 6",last_name: "Last 6",roll_number: "2",year: "Teacher"},
{ first_name: "User 7",last_name: "Last 7",roll_number: "2",year: "Professor"},
{ first_name: "User 8",last_name: "Last 8",roll_number: "1",year: "student"},
{ first_name: "User 9",last_name: "Last 9",roll_number: "1",year: "student"},
{ first_name: "User 10",last_name: "Last 10",roll_number: "1",year: "student"}
]; // Can be obtained from another source, such as your objJson variable
function prevPage()
{
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");
// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
listing_table.innerHTML = "";
var HTML = "<table border=1 width=300px>";
HTML += "<tr><td align=center>First Name</td><td align=center>Year</td></tr>";
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) {
HTML += "<tr><td align=center>"+objJson[i].first_name+"</td><td align=center>"+ objJson[i].year +"</td></tr>";
//listing_table.innerHTML += "<tr><td>" + objJson[i].first_name + "</td></tr><br />";
}
HTML += "</table>";
document.getElementById("listingTable").innerHTML = HTML;
page_span.innerHTML = page + "/" + numPages();
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages()
{
return Math.ceil(objJson.length / records_per_page);
}
window.onload = function() {
changePage(1);
};
</script>
</head>
<body>
<select name="FilterResultsYears">
<option value="">All</option>
<option value="Freshman">Freshman</option>
<option value="student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Professor">Professor</option>
</select>
<select name="FilterResultsRoles">
<option value="">All</option>
<option value="0">Role 0</option>
<option value="1">Role 1</option>
<option value="2">Role 2</option>
</select>
<br /><br /><br />
<div id="listingTable"></div>
<table width="300" border="1">
<tr>
<td><a href="javascript:prevPage()" id="btn_prev">Prev</a></td>
<td><a href="javascript:nextPage()" id="btn_next">Next</a></td>
<td>page: <span id="page"></span></td>
</tr>
</table>
</body>
</html>