Pagination script

jbzcc · #1 (**permalink**) 04-29-2008, 03:44 PM

Hello, I need a simple pagination script and seeking to get help on that.

drjerm · #2 (**permalink**) 05-03-2008, 01:41 PM

By pagination, do you mean showing a list of items in a table like manner where you can page through them? Kind of like the Google search results on a page with their numbers at the bottom?

There are a few questions I have for you on this, one is are you just using static html pages? Or are you programming in asp, php, or some other programming language? Another question is where is the information from this list coming from, is it a database, xml file, or just a list on your web page?

If it is just static and you are not going to have too many paginated lists, I would just make a page called 'ListofItem1.html' and put items 1 - 20 on that page. Then make another page called 'Listofitems2.html' and put items 21-40 on that page, and so on. Then on the bottom of each page, put the number of pages like Google does (1 2 3 4 5) and have each number link to the right page. The problem with this is there is a lot of duplication and redundancy so maintaining is hard.

You can also use javascript to show and hide the information in your list. If you are interested in learning javascript and using it for a paginated list, I can help you with that. This will allow you to use one page for your information, which is nice.

If you are using a programming language like asp or php and have a database like mysql or sql server, I can help you with making one page that handles all of the pagination.

Let me know which option you prefer. If you would rather just be given a solution for all 3, I have no problem taking the time to create one for you

drjerm · #3 (**permalink**) 05-03-2008, 02:13 PM

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>

WB Sponsors