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>

I suggest you use jquery datatables.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.