Client-side Paging without JavaScript

Anoop_Ravindran

4.60/5 (14 votes)

Mar 12, 2014

CPOL

20862

Here is a small tip to perform a client-side paging without any scripting language

Introduction

This is a simple paging technique in HTML done with the help of HREF attribute and CSS tags. No scripting language is required to do this.

Using the Code

The paging functionality is accomplished with the help of DIV tags with unique IDs as shown in the below HTML code. There are four DIV tags which have the contents and title. These DIVs are inside a main DIV which has the style attribute overflow set to the value hidden.

There is a pager built with an un-ordered list (<ul>) which consists of anchors (<a>). The HREF tag of each anchor is referring to the unique IDs of the DIV tags. While clicking the page number, the corresponding DIV will appear at the top of the main DIV.

<!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> 
    <style type="text/css">
    body
    {
        color:#f0f0f0;
        background-color:#776;
        font-family:calibri;
        font-size:14px;
    }
    
    h3 
    {
        font-size:20px;        
    }

    ul
    {
        margin:10px 0 0 0;
        padding:0;
    }

    ul li
    {
        list-style:none;
        float:left;
    }

    ul li a
    {
        border:solid 1px #c0c0c0;
        border-width: 1px 0px 1px 1px;
        background-color:#f0f0f0;
        padding:8px;
        text-decoration:none;
        outline:none;
        color:#00f;
    }


    ul li a.last
    {
        border-right-width: 1px;
    }

    div 
    {
        overflow:auto;
        height:250px;
        padding:0 20px 20px 20px;    
        border:solid 0px #f00; 
        
    }

    div.main
    {  
        border:solid 5px #f0f0f0; 
        width:300px;
        overflow:hidden;
        padding:0;
    }
    </style>
</head>
<body> 

    <div class="main">

        <div id="S1">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor  
lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametlorem ipsum dolor sit 
lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit. </p>
        </div>

        <div id="S2">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor. </p>
        </div> 

        <div id="S3">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum dolor
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet.</p>
        </div>

        <div id="S4">
            <h3>Title 4</h3>
            <p>Lorem ipsum dolor sit amet lorem ipsum 
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
ipsum dolor sit amet lorem ipsum dolor sit amet.</p>
        </div>

    </div>
 
    <!-- PAGER -->
    <ul>
        <li><a href="#S1">1</a></li>
        <li><a href="#S2">2</a></li>
        <li><a href="#S3">3</a></li>
        <li><a href="#S4" class="last">4</a></li>
    </ul>
    <!-- PAGER -->

</body>
</html>

Feedback

Please feel free to post your feedback. Thanks.