.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Javascript >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to make pagination in HTML

Posted By:Kemal AL GAZZAH       Posted Date: February 04, 2014    Points: 25    Category: Javascript    URL: http://www.dotnetspark.com  

A simple way using javascript to make pagination through a HTML file
 

When you deal with long HTML document sent to customers, it may be too boring for them to go through the whole document using the scroll bar.
We can add pagination into the HTML document so that the user will see, at one time, only one part of the document.
To achieve that I put each page content in one div and the div Id's are called d1, d2 etc.
Then two buttons are added to the bottom of the HTML document, one will allow going to the next page and the other one for the previous page.
I store the page index in one hidden field and each time the user clicks next, the index is incremented by 1 and when he clicks previous it decrements it by one.
Then the function show(i,n) 
[i=1 for incrementation and i=-1 for decrementation and n= the number of the page]  will display the page with index=n and hide all the other pages.
Here is the whole code (HTML+ javascript:

<html>
<head>
<script language="javascript">
function show(i,n)
{
document.getElementById("index").value=1*document.getElementById("index").value+i;
if(document.getElementById("index").value>n)
{
document.getElementById("index").value=1;
}
if(document.getElementById("index").value<1)
{
document.getElementById("index").value=n;
}

var tbs = document.getElementsByTagName("div");
for (var loop = 0; loop < tbs.length; loop++) 
{
if(tbs[loop].id=="d"+ document.getElementById("index").value  )
{
tbs[loop].style.visibility = 'visible'; 
}
else
{
tbs[loop].style.visibility = 'hidden'; 
}
}
}
</script>
</head>
<body>
<div id="d1"  style="visibility: visible;position:absolute;left:50px;top:1px;border-style:solid;width:1300px;height:700px;">Page1:blabala</div>
<div id="d2" style="visibility: hidden;position:absolute;left:50px;top:1px;border-style:solid;width:1300px;height:700px;">Page2:encore du blabala</div>
<div id="d3" style="visibility: hidden;position:absolute;left:50px;top:1px;border-style:solid;width:1300px;height:700px;">Page3:encore et encore du 

blabala</div>
<div id="d4" style="visibility: hidden;position:absolute;left:50px;top:1px;border-style:solid;width:1300px;height:700px;">Page4:encore et encore du 
<input type="hidden" value="1" name="id" id="index" />

<input type="button" value="<=" onclick="show(-1,4)"  style="visibility: visible;position:absolute;left:600px;top:720px;" />
<input type="button" value="=>" onclick="show(1,4)"   style="visibility: visible;position:absolute;left:650px;top:720px;"/>
</body>
</html>



 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend