Ok, I have an html page with a javascript example that I made. It is simple and works in recent browser versions with javascript enabled. I could make an uber javascript pagination file that stream lines this process a lot more if there were enough requests as such a project would take time, but I can see the value of it. I'd recommend separating the javascript and css into separate files, however for simplicity, I've combined them in one html page:
Quote:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination using Javascript Example by Jeremy N. Johnson</title>
<script language="javascript" type="text/javascript">
// This javascript function shows and hides sections of code.
// It works with new versions of browsers (older browsers may have problems)
function ShowHideSection(id)
{
// Default by hiding all your pages
document.getElementById('Page1').style.display = 'none'
document.getElementById('Page2').style.display = 'none'
document.getElementById('Page3').style.display = 'none'
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
}
}
function SetCurrentPage(id)
{
// Default to unbolding all page links
document.getElementById('LinkPage1').style.fontWei ght = 'normal'
document.getElementById('LinkPage2').style.fontWei ght = 'normal'
document.getElementById('LinkPage3').style.fontWei ght = 'normal'
document.getElementById(id).style.fontWeight = 'bold'
}
function SetDefaults()
{
// Default the first page link as bold
SetCurrentPage('LinkPage1');
// Default showing just the first page
ShowHideSection('Page1');
}
</script>
<style type="text/css">
.Page
{
font-size: 14px;
font-family: Georgia;
}
</style>
</head>
<body onload="SetDefaults();">
<table id="Page1" class="Page" cellpadding="5" border="1">
<tr>
<td><b>Name</b></td>
<td><b>Title</b></td>
<td><b>Description</b></td>
</tr>
<tr>
<td>Joe Big</td>
<td>He's the man</td>
<td>this is a description for joe big</td>
</tr>
<tr>
<td>Person 2</td>
<td>Person 2 title</td>
<td>this is a description for person 2</td>
</tr>
<tr>
<td>Person 3</td>
<td>Person 3 title</td>
<td>this is a description for person 3</td>
</tr>
<tr>
<td>Person 4</td>
<td>Person 4 title</td>
<td>this is a description for person 4</td>
</tr>
<tr>
<td>Person 5</td>
<td>Person 5 title</td>
<td>this is a description for person 5</td>
</tr>
</table>
<table id="Page2" class="Page" cellpadding="5" border="1">
<tr>
<td><b>Name</b></td>
<td><b>Title</b></td>
<td><b>Description</b></td>
</tr>
<tr>
<td>Joe Big 2</td>
<td>He's the man 2</td>
<td>this is a description for joe big 2</td>
</tr>
<tr>
<td>Person 6</td>
<td>Person 6 title</td>
<td>this is a description for person 6</td>
</tr>
<tr>
<td>Person 7</td>
<td>Person 7 title</td>
<td>this is a description for person 7</td>
</tr>
<tr>
<td>Person 8</td>
<td>Person 8 title</td>
<td>this is a description for person 8</td>
</tr>
<tr>
<td>Person 9</td>
<td>Person 9 title</td>
<td>this is a description for person 9</td>
</tr>
</table>
<table id="Page3" class="Page" cellpadding="5" border="1">
<tr>
<td><b>Name</b></td>
<td><b>Title</b></td>
<td><b>Description</b></td>
</tr>
<tr>
<td>Joe Big 3</td>
<td>He's the man 3</td>
<td>this is a description for joe big 3</td>
</tr>
<tr>
<td>Person 10</td>
<td>Person 10title</td>
<td>this is a description for person 10</td>
</tr>
<tr>
<td>Person 11</td>
<td>Person 11 title</td>
<td>this is a description for person 11</td>
</tr>
<tr>
<td>Person 12</td>
<td>Person 12 title</td>
<td>this is a description for person 12</td>
</tr>
<tr>
<td>Person 13</td>
<td>Person 13 title</td>
<td>this is a description for person 13</td>
</tr>
</table>
<div>
<a id="LinkPage1" href="javascript:;" onclick="ShowHideSection('Page1');SetCurrentPage(' LinkPage1');">1</a> |
<a id="LinkPage2" href="javascript:;" onclick="ShowHideSection('Page2');SetCurrentPage(' LinkPage2');">2</a> |
<a id="LinkPage3" href="javascript:;" onclick="ShowHideSection('Page3');SetCurrentPage(' LinkPage3');">3</a>
</div>
</body>
</html>
|