Paging in html table using javascript

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data.

Step#1:
Include the following css in your page header;

<style type="text/css">
.pg-normal {
color: #000000;
font-size: 15px;
cursor: pointer;
background: #D0B389;
padding: 2px 4px 2px 4px; }
.pg-selected {
color: #fff;
font-size: 15px;
background: #000000;
padding: 2px 4px 2px 4px; }

table.yui {
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small; }

table.yui td {
padding: 5px;
border-right: solid 1px #7f7f7f; }

table.yui .even {
background-color: #EEE8AC; }

table.yui .odd {
background-color: #F9FAD0; }

table.yui th {
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389; }

table.yui th a {
text-decoration: none;
text-align: center;
padding-right: 20px;
font-weight:bold;
white-space:nowrap; }

table.yui tfoot td {
border-top: 1px solid #7f7f7f;
background-color:#E1ECF9; }

table.yui thead td {
vertical-align:middle;
background-color:#E1ECF9;
border:none; }

table.yui thead .tableHeader {
font-size:larger;
font-weight:bold; }

table.yui thead .filter {
text-align:right; }

table.yui tfoot {
background-color:#E1ECF9;
text-align:center; }

table.yui .tablesorterPager {
padding: 10px 0 10px 0; }

table.yui .tablesorterPager span {
padding: 0 5px 0 5px; }

table.yui .tablesorterPager input.prev {
width: auto;
margin-right: 10px; }

table.yui .tablesorterPager input.next {
width: auto;
margin-left: 10px; }

table.yui .pagedisplay {
font-size:10pt; 
width: 30px;
border: 0px;
background-color: #E1ECF9;
text-align:center;
vertical-align:top; }
</style>

Step#2

Copy & paste the following script  in your page header;

<script type="text/javascript">

function Pager(tableName, itemsPerPage) {

this.tableName = tableName;

this.itemsPerPage = itemsPerPage;

this.currentPage = 1;

this.pages = 0;

this.inited = false;

this.showRecords = function(from, to) {

var rows = document.getElementById(tableName).rows;// i starts from 1 to skip table header rowfor (var i = 1; i < rows.length; i++) {

if (i < from || i > to)

rows[i].style.display = 'none';

elserows[i].style.display = '';}

}

this.showPage = function(pageNumber) {

if (! this.inited) {

alert("not inited");

return;}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);oldPageAnchor.className = 'pg-normal';

this.currentPage = pageNumber;

var newPageAnchor = document.getElementById('pg'+this.currentPage);newPageAnchor.className = 'pg-selected';

var from = (pageNumber - 1) * itemsPerPage + 1;

var to = from + itemsPerPage - 1;

this.showRecords(from, to);}

this.prev = function() {

if (this.currentPage > 1)

this.showPage(this.currentPage - 1);}

this.next = function() {

if (this.currentPage < this.pages) {

this.showPage(this.currentPage + 1);}

}

this.init = function() {

var rows = document.getElementById(tableName).rows;

var records = (rows.length - 1);

this.pages = Math.ceil(records / itemsPerPage);

this.inited = true;}

this.showPageNav = function(pagerName, positionId) {

if (! this.inited) {

alert("not inited");

return;}

var element = document.getElementById(positionId);

var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';

for (var page = 1; page <= this.pages; page++)

pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';element.innerHTML = pagerHtml;}

}

</script>

Stet#3

Define an ID on the table you want to paging that is "tablepaging" ; place an empty div in the place you want to display the navigation bar. that is "pageNavPosition"; include an initialization script at the bottom of your page. 

<table id="tablepaging" class="yui" align="center">

<thead>

<tr>
                <th>Name </th>
                <th>Collage </th>
                <th>Gender </th>
                <th>percentage </th>            
            </tr>
   <tbody>
            <tr class="even">
                <td>Munesh </td>
                <td>ABC </td>
                <td>M </td>
                <td>80 </td>              
            </tr>
            <tr class="odd">

                <td>Rahul </td>
                <td>PQR </td>
                <td>M </td>
                <td>80 </td>
             
            </tr>
            <tr class="odd">

                <td>Govind </td>
                <td>XYZ </td>
                <td>M </td>
                <td>40 </td>
               
            </tr>
            <tr class="odd">

                <td>Anshuman </td>
                <td>CollageName1 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>
            <tr class="odd">

                <td>Student1 </td>
                <td>CollageName2 </td>
                <td>M </td>
                <td>50 </td>
            
            </tr>
            <tr class="odd">

                <td>Student2 </td>
                <td>CollageName3 </td>
                <td>F </td>
                <td>60 </td>
               
            </tr>
            <tr class="odd">

                <td>Student3 </td>
                <td>CollageName4 </td>
                <td>F </td>
                <td>70 </td>
               
            </tr>
            <tr class="odd">

                <td>Student4 </td>
                <td>CollageName5 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>

        </tbody>

</table>

<div id="pageNavPosition" style="padding-top: 20px" align="center">

</div>

<script type="text/javascript"><!--

var pager = new Pager('tablepaging', 5);

pager.init();pager.showPageNav('pager', 'pageNavPosition');

pager.showPage(1);

</script>

Output

Name	Collage	Gender	percentage
Munesh	ABC	M	80
Rahul	PQR	M	50
Govind	XYZ	M	70
Anshuman	AAA	M	60

« Prev  1 2 3 4 5 6 7 Next »