Client-Side Paging with Tables:  

Most of the times, you don't need to paginate on the client side: if you have an enough small set of records to be displayed, I would suggest you to choose a scrollable <div/>.
Server-side web pagination is really needed when you have to display hundreds of records. You may fetch results from the DB using an offset and loading a single page for each HTTP request. SO I tried with the following script for client side paging in my HTML table.

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 row

for (var 1i < rows.lengthi++) {

if (i < from || i > to)

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

else

rows[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 1page <= this.pagespage++)

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>Major </th>
<th>Sex </th>
<th>English </th>
<th>Tamil </th>
<th>Calculus </th>
<th>Geometry </th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Student01 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </td>
<td>80 </td>
</tr>
<tr class="odd">

<td>Student02 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </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>

Online Demo:




Name

Major

Sex

English

Tamil

Calculus

Geometry

Student01

Languages

M

80

70

75

80

Student02

Mathematics

M

90

88

100

90

Student03

Languages

F

85

95

80

85

Student04

Languages

M

60

55

100

100

Student05

Languages

F

68

80

95

80

Student06

Mathematics

M

100

99

100

90

Student07

Mathematics

M

85

68

90

90

Student08

Languages

M

100

90

90

85

Student09

Mathematics

M

80

50

65

75

Student10

Languages

M

85

100

100

90

Student11

Languages

M

86

85

100

100

Student12

Mathematics

F

100

75

70

85

Student13

Languages

F

100

80

100

90

Student14

Languages

F

50

45

55

90

Student15

Languages

M

95

35

100

90

Student16

Languages

F

100

50

30

70

Student17

Languages

F

80

100

55

65

Student18

Mathematics

M

30

49

55

75

Student19

Languages

M

68

90

88

70

Student20

Mathematics

M

40

45

40

80

Student21

Languages

M

50

45

100

100

Student22

Mathematics

M

100

99

100

90

student23

Mathematics

M

82

77

0

79

Student23

Languages

F

85

80

80

80

student24

Languages

F

100

91

13

82

26 comments

  1. Anonymous // August 16, 2012 at 5:11 PM  

    thanks........this helps a lot!!!!!

  2. Anonymous // September 5, 2012 at 5:15 PM  

    not working in internet explorer
    please provide some solution if you have.
    thanks.

  3. Anonymous // November 19, 2012 at 7:14 AM  

    trimakasih, thank

  4. Anonymous // March 23, 2013 at 12:17 PM  

    while I'm using tables in innerHtml from codebehind, its not working..

    can you please help me on this.. i face the runtime error in below line.

    for (var i = 1; i < rows.length; i++) {

    if (i < from || i > to)

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

    Error : Microsoft JScript runtime error: Unable to set value of the property 'display': object is null or undefined

  5. bhupendra Pratap Singh // August 8, 2013 at 11:54 AM  

    Very very thanx buddy.

  6. M Yunus // September 20, 2013 at 2:45 PM  

    Arigatōgozaimashita
    Terima kasih banyak
    Thank you very much
    It works for me!

  7. M Yunus // September 20, 2013 at 2:46 PM  

    Arigatōgozaimashita
    Terima kasih banyak
    Thank you very much
    It works for me!

  8. Priti V // October 18, 2013 at 10:36 AM  

    Thanks a lot for this....... its working great...!!!

  9. Priti V // October 18, 2013 at 10:37 AM  

    Thanks a lot ... its working superb.. :)

  10. Priti V // October 18, 2013 at 10:38 AM  

    Thank a lot ..!!

  11. Priti V // October 18, 2013 at 10:38 AM  

    Thank a lot ..!!

  12. Anonymous // December 20, 2013 at 12:04 PM  

    Hi
    I put the activate scripts
    var pager = new Pager('tablepaging', 3);
    pager.init();
    pager.showPageNav('pager', 'pageNavPosition');
    pager.showPage(1);

    in Jquery $(function(){
    ...//put in here
    })
    But it did not work, could you help to give some hint? Thanks

  13. Sagnik Pathak // February 23, 2014 at 11:10 AM  

    codes works great........thanks....
    but in the navigation it shows all the pages available i want to restrict the number of pages shown...how to do that??

  14. Hajar Hardi // April 16, 2014 at 2:02 PM  

    Thank you, it's very helpful
    I need to know how i can show only the first and the last page number since i have so many pages

    i want something that looks like

    [1] .... [300]

  15. Hajar Hardi // April 16, 2014 at 2:05 PM  

    Hi, Thank you for your post it's very helpful

    I need to know how to show only the first and the last page number since i have so much pages

    I need something that looks like

    Prev 22[1] .... [3000] Next

  16. ashok sri // April 22, 2014 at 8:31 AM  

    hey,actually it's not a perfect one,if we have a 1000 records and we have set the limit per page is 10 then it will shows 1 to 100 pages and so on...generally we need the below format like 1 2 3 ..100

  17. Joy Ramos // September 5, 2014 at 4:01 PM  

    Hi! I have the same problem too. Got hundreds of records and I just have to make this thing work like 123...100. Anyone who can help me?

  18. Anonymous // September 27, 2014 at 1:18 AM  

    Hi,

    Thanks for this, was a huge help!

  19. Anonymous // September 27, 2014 at 1:19 AM  

    Hi,

    Thanks for this, was a huge help!

  20. Anish // October 17, 2014 at 12:15 PM  

    Thaks a lot it really helped me

  21. Cord // October 21, 2014 at 2:15 AM  

    I was having trouble getting this working with drupal. It turned out that the global pager variable was being overwritten or unset...I was able to use the window object instead, window.Dashboard.pager.

  22. Anonymous // October 21, 2014 at 7:53 PM  

    Hi, the code itself works but this error keeps popping up: JavaScript runtime error: Unable to set property 'className' of undefined or null reference. It points to this lines in the script:
    var oldPageAnchor = document.getElementById('pg'+this.currentPage);

    oldPageAnchor.className = 'pg-normal';

    Can anyone please help?

  23. Anonymous // February 3, 2015 at 10:43 PM  

    this is good work. thanks lot. you have saved my time. lots of thanks

  24. Anonymous // February 23, 2015 at 4:03 PM  

    Great job !!!! thanks a lot

  25. Anonymous // June 4, 2015 at 11:04 AM  

    Thank you very very much.
    It helped a lot.

  26. may phyo // June 29, 2015 at 1:58 PM  

    how should I do I have three tables id name?

Related Posts Plugin for WordPress, Blogger...