Client-side HTML table pagination with JavaScript

86 Comments Published September 27th, 2006 in JavaScript, Web Tags: .

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.
If your resultset is small it's possible to load it fully. Sometime I saw code loading the full resultset in session; and on each page-switch the browser refreshes displaying a different subset/page. There are many disadvantages of a server-side pagination like this:

You have to use the HTTP Session (and remember to clean up when it's nomore needed).
You have to reload the page on every page switch.
You cannot go forward and backward to check previous data without loosing the view on current resultset.
You have to write code for the server side actions handling all the page-switch work.

As I said before, everything would be solved using a table inside scrollable div but, in my current web application "GUI designers" like to persecute the users having them clicking and clicking even for few records. As in my case, I have an "editable table" (an html form) that's also paginated, in wich validation of each record depends on other records...
At least I wanted to avoid reloading the page on every page switch, and also avoid using HTTP Session when not strictly necessary. So I end up writing a JavaScript paginator object that handles the job of paginating any html table rendering also a simple pagination bar.

Here's a live sample:

#	field
1
2
3
4
5
6
7
8
9
10

To use my javascript you need to:

include the javascript using <script src="pager.js"> in your page header;
include a small css to skin the page navigation-bar (i.e. for emphasizing the selected page using bold and underline style);
define an ID on the table you want to scroll. i.e. <table id="results"> ;
place an empty <div/> in the place you want to display the navigation bar. i.e. <div id="pageNavPosition"> ;
include an initialization script at the bottom of your page like this:
```
<script type="text/javascript"></script>
```
Where 'results' is the id of the table (see step #3), 3 is the number of records per page, 'pager' is the name of the variable (in red... that's ugly I agree...), and pageNavPosition is the ID of the DIV inside of which the pagination bar will be placed. The showPage(1) indicates that, when loading the page, the 1st one should be displayed.

That's all. If you want to download a demo (html+javascript files), you can click here: JavaScript Table Paginator Demo.

If you have a huge table, maybe it will be displayed fully before the javascript at the bottom will be executed. To avoid this, you can set the table as hidden by default using css style, and make it visibile using JavaScript after the pager.showPage() call.

86 Responses to “Client-side HTML table pagination with JavaScript”

Feed for this Entry Trackback Address

1 Riccardo Pasquini Oct 3rd, 2006 at 16:20

great idea to use directly the table rows style
i will probably steal yr snippet ;)
2 Luigi Oct 4th, 2006 at 00:17

It seems also suitable for implementing forms in a whizards fashion: you can put every page of the whizard in a table row, and add the submit button only on the last page.
3 sandip Nov 9th, 2006 at 11:01

how can we hide Next>> link in last page and

4 Luigi Nov 9th, 2006 at 12:09

put an Id attribute on next>> span (in showPageNav function) and apply style.display = ‘none’ when this.currentPage == this.pages (in showPage function)

should not be difficult:

    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);
        
        var pgNext = document.getElementById('pgNext');
        var pgPrev = document.getElementById('pgPrev');
        if (this.currentPage == this.pages)
            pgNext.style.display = 'none';
        else
            pgNext.style.display = '';
	if (this.currentPage == 1)
            pgPrev.style.display = 'none';
        else
            pgPrev.style.display = '';
    }
    ...
    this.showPageNav = function(pagerName, positionId) {
    	if (! this.inited) {
    		alert("not inited");
    		return;
    	}
    	var element = document.getElementById(positionId);

    	var pagerHtml = '<span id="pgPrev" 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 id="pgNext" onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';            

        element.innerHTML = pagerHtml;
    }

HTH

5 vivekanandk Dec 5th, 2006 at 10:38

Can anybody help me….. Can we develop a pagination using this code like google. Please if you guys have any code, please forward me to my mail-id.
6 Vivekanand Dec 15th, 2006 at 20:41

Hi Lascia,

This pagination is Cool. But I have a request for you Lascia. Can I made this pagination like the google one.

while doing any search in google it will display only 10 first, then it will starts scrolling when we click on the next button. once we have reached 10 then till take you to 11, 12, etc….

And I have used your Script on Button Click. On clicking a Button one div loads all the stuff and pagination is applied. Its fine for the first attempt. That div has a closing facilty also. Once I close that Div and Start Clicking on the Button it is firing and error like ‘null’ is not an object

I am new to Javascript. Please help me out…..

Could you please help me in this regard.

Please …. Please……

Thanks in Advance….
7 santosh Dec 29th, 2006 at 15:37

Hi,

Thanx for Good stuff.

Can you help me to make this type of pagination, as a Generic Component Pagination.
That is used for any page in our project.

How to make like that. Plz help me. I have to use JS & CSS.

waiting for ur reply
8 David Levin Apr 20th, 2007 at 19:34

Great Script! At what point in terms of records would you recommend moving to server-side pagination? Is 100 records worth making the switch? Is 1000?

Also, I agree with Vivekanand that putting a “…” in the next N records interface might make things easier if there are more than 10 pages.

Thanks again.
9 Shivaram Apr 27th, 2007 at 16:43

I am looking for a script that can hide “next” button on last page and “Previous” button on forst page.

Can anyone please help me on this?

Thanks – Shivaram
10 Sebastian May 29th, 2007 at 23:05

you can set the table as hidden by default using css style, and make it visibile using JavaScript after the pager.showPage() call.

Can you tell me more how to set table hidden usind css?
and make it visable after pager.showPage()…… plz
11 Sebastian May 30th, 2007 at 05:25

If you have a huge table, maybe it will be displayed fully before the javascript at the bottom will be executed. To avoid this, you can set the table as hidden by default using css style, and make it visibile using JavaScript after the pager.showPage() call.

Can somebody help me find javascript that will hidde a tabell in the biegining and show it after this script has been executet
12 Karthikeyan Jun 1st, 2007 at 17:31

Hi,

You are GREAT. Your script worked a lot for me. Thanks for providing this script.
13 Abhishek Khandelwal Sep 6th, 2007 at 07:17

Hi Shivram,

Please use the following code to hide the display of “Next” Button on last page and “prev” button on first page
Please put the following code in showPage() function

var pgNext = document.getElementById(’pgNext’);
var pgPrev = document.getElementById(’pgPrev’);
if (pageNumber == this.pages)
pgNext.style.display = ‘none’;
else
pgNext.style.display = ‘true’;
if (pageNumber == 1)
pgPrev.style.display = ‘none’;
else
pgPrev.style.display = ‘true’;

Hope this works for u as well
Thanks
abhishek khandelwal
14 yoshi Oct 1st, 2007 at 09:40

thanks alot for this code. cheers
15 sunil Nov 1st, 2007 at 17:30

Plz its urgent

This pagination is Cool. But I have a request for you Lascia. Can I made this pagination like the google one.

while doing any search in google it will display only 10 first, then it will starts scrolling when we click on the next button. once we have reached 10 then till take you to 11, 12, etc….
16 Keshav Nov 20th, 2007 at 10:20

This is realy the best way to acheive client side paging but can somebody suggest a way to add cloumn sorting also
together with this kind of paging…
17 Kobe Nov 27th, 2007 at 02:28

hey, great script, but how exactly do i make it for large tables?
18 Kobe Nov 27th, 2007 at 02:38

No problem, i got it working…. amazin amazing script…. thanks a whole lot…
19 Tajudeen Dec 11th, 2007 at 11:50

Excellent
but it was getting javascript error .so just update from ‘true’ to ‘block’
the snippet is updated below

var pgNext = document.getElementById(‘pgNext’);
var pgPrev = document.getElementById(‘pgPrev’);

if (pageNumber == this.pages)
pgNext.style.display = ‘none’;
else
pgNext.style.display = ‘block’;
if (pageNumber == 1)
pgPrev.style.display = ‘none’;
else
pgPrev.style.display = ‘block’;
20 Luigi Dec 11th, 2007 at 12:45

Thankyou Tajudeen. A patch for the Abhishek Khandelwal change. Nice one!

I wouldn’t make it invisible, anyway. I would prefere to make it grayed:

pgNext.style.color = ‘gray’;

instead of

pgNext.style.display = ‘none’;
21 Jali Dec 11th, 2007 at 18:43

great!! thanks for this script!!
22 Bakiyalakshmi Dec 18th, 2007 at 14:23

Hi,

I am using a textbox(for itemsperpage) and passing the value of textbox as below

var pager = new Pager(‘results’,document.form.text.value);

whenever i click a button it will call a function which hold the script as below

function page(){
var pager = new Pager(‘results’, 3);
pager.init();
pager.showPageNav(‘pager’, ‘pageNavPosition’);
pager.showPage(1);
}

if I do so, I am getting pager is not defined.

please provide some solution for getting the ‘number of items’ from user and paginating accordingly
23 Vincenzo Jan 10th, 2008 at 12:43

Hi!
I need to use your script for three table in the same page…can you tell me where I must change the code? if I change the name of the ID in the file, the css is incorrect…sorry for my bad english, but I’m Italian!
EXAMPLES:

Title1
Order1
Data1
bott1

A211/11/2004a2
C123/01/2005c1
B514/12/2000b5

Title1
Order1
Data1
bott1

A311/11/2004a3
C223/01/2005c2
B514/12/2000b5

Please Help me!….THANK YOU!!
24 Luigi Jan 10th, 2008 at 12:58

Vincenzo:
var pager = new Pager('results', 3); pager.init(); pager.showPageNav('pager', 'pageNavPosition'); pager.showPage(1);

var pager2 = new Pager('results2', 3);
pager2.init();
pager2.showPageNav('pager2', 'pageNavPosition');
pager2.showPage(1);

And so on…
25 Vincenzo Jan 10th, 2008 at 13:32

Thank you Luigi, but I have also tried this solution before to send here my question.
I have resolved the problem with a new parameter “prefixPg” in the function Pager

function Pager(tableName, itemsPerPage, prefixPg)

I use this parameter for to concat it to the old ID in the tag SPAN, so I have created different ID for different table.

In the function showPage I have concat the variable “prefixPg” for to call the right ID:
var oldPageAnchor = document.getElementById(this.prefixPg ‘pg’ this.currentPage);
var newPageAnchor = document.getElementById(this.prefixPg ‘pg’ this.currentPage);

and also in the function showPageNav in the loop FOR I have added the variable prefixPg for create the ID dynamically:
pagerHtml = ” page ‘ | ‘;

Bye Bye and thanks anyway for your help! ;)
26 Hari Feb 22nd, 2008 at 11:35

Hi …
Thanks… for sharing u r knowledge regarding Pagination through out world…
My problem is i am not getting hyper link on page numbers…
i am not getting this point “include a small css to skin the page navigation-bar (i.e. for emphasizing the selected page using bold and underline style); “

Thanks,
Hari.
27 Balu Mar 27th, 2008 at 07:42

Hi Luigi,

This pagination is Cool. But I have a request for you Lascia. Can I made this pagination like the google one.

while doing any search in google it will display only 10 first, then it will starts scrolling when we click on the next button. once we have reached 10 then till take you to 11, 12, etc….

Plz Help me
28 Mark Apr 3rd, 2008 at 16:17

Hi Luigi,

Thanks for this great script. I am using this for a new project.

There is one thing which would make the script even better.
For example:

1. I’ll start a search on my website
2. Results are shown with your table-pagination-script
3. I click forward to page 5 of the results.
4. On this page I follow a link to another webpage for more information.
5. Then I use the back button to return to the results.

As you can imagine: the results always start on the first page (and do not send me back to page 5). This is due to the pager2.showPage(1); code…

Is it possible to ‘remember’ te last page and bring me back using the back button in my browser?

Thanks in advance!
Gr,
Mark
info@lupker.nl
29 Luigi Apr 3rd, 2008 at 18:17

Hi All.

I am no more actively working on this script. It was just an example, and for sure it can be improved in many ways.
All the improvement requests I saw here are possible (and, in most of the cases, not difficult to implement). But unluckily I have not much time to do more work on this, so take it as it is, or improve it yourself.

If I ever will work again on this script I’ll share the improvements, or I’ll make it as an open source project to allow everyone to make it better. For now, I cannot actively support change requests, sorry.

The example above was just to show that complex things can be made simpler if changing the perspective (paginate on the client, instead of using complex server side logics, or AJAX calls or other cool technologies).
I used this script on production to fake server side pagination: if the analysts knew that I was going to paginate on the client hundreds of records, the would say “are you crazy? loading everything on an html page is damn slow!”. Well, it wasn’t slow, and actually I got compliments on how fast it was to pass from one page to the next after ;) (after the first load, of course, that was just taking a couple of seconds).
30 satish Apr 16th, 2008 at 17:29

Hi ! can any one solve my problem.
If i want to show only 5 numbers on top out of 100 numbers.
and hilighted page should be in middle in prev next and also on directly click on page no.
Thank you!
31 Venkat May 15th, 2008 at 11:32

Hi vivekanandk,

We can develop a pagination using below url code like google. If you have any more doubts .Pls make a mail to me.

http://www.frequency-decoder.com/2007/10/19/client-side-table-pagination-script/
32 Waqas May 21st, 2008 at 11:10

Good work brother…
33 Shweta Jun 4th, 2008 at 11:59

function page(){
var pager = new Pager(’results’, 3);
pager.init();
pager.showPageNav(’pager’, ‘pageNavPosition’);
pager.showPage(1);
}

if I do so, I am getting pager is not defined.
please provide me solution
34 Cees Jun 27th, 2008 at 10:10

@Shweta: Make sure you’ve included the .js file before calling functions from it, see the example.
35 kailash Jul 12th, 2008 at 14:45

Am also getting the same error as pager not defined please any one help me in solving this out .

Thank u in advance.
36 Annin Sep 3rd, 2008 at 04:16

How NOT to skip the table header row (ie. I don’t want to include the header on every page). I set i=0 instead of i=1, but its still including the first row on every page.
37 Amy Sep 10th, 2008 at 08:17

Thank you!!! You just solved my problem of how to submit only on the last page of a form while keeping the table intact! GREAT job!! Nicely thought :)
38 WordByWordHut.com Oct 9th, 2008 at 01:41

Very Nice
39 deepak Oct 15th, 2008 at 13:11

Hai this code very use full to me………….
thank u
40 Yaghwin Oct 17th, 2008 at 07:11

HI,

Thanks for such a wonderful script.
you rock buddy!!!
41 Enrico Nov 2nd, 2008 at 10:33

Hi,

thank you very much for your excellent code, it seemed very easy to implement, it seemed.

According to the layout of my homepage i have to put the content of my dynamically table
into a div.

When opening my homepage all seems fine (the table is being generated and the paginator
too), but when clicking on a page-number or the link “next” nothing happens and i get the
error-message “pager is not defined” in the error-console of Mozilla Firefox.

I really don’t know why.

Could you please help me to get rid of this error.

Thank you very much.

Enrico
42 Mansi Nov 20th, 2008 at 23:49

Hi ,

Can anyone suggest , how to keep the track of current page using this paging.js?

Thanks in advance,
43 NomogoLoula Dec 15th, 2008 at 12:28

Great pager. Simple and reusable.

In order to page some list, just replace the 2 “.rows” property-calls on main table with “getElementsByTagName(“li”), took the ul’s id as the main table.

Done ^^.

Thanks a lot.
44 Arun Prasanna Jan 2nd, 2009 at 12:12

Hi this code very use full to me to implement simple pagination

thank you
45 Robin Jan 8th, 2009 at 21:29

Super cool. This works like a charm for me!

Thanks
46 Siva Jan 12th, 2009 at 09:45

Hi,

Your code is very helpful for me..Thanx a lot
47 Amol Jan 22nd, 2009 at 17:54

Very nice Script…………
……………………………
48 azhar Feb 12th, 2009 at 23:54

Hi,
How do i go to first page using this code?
49 visu Feb 14th, 2009 at 07:48

iam calling this function on load() but the next click is not functioning plz solve my problem

thank in advance
50 Karthik Feb 17th, 2009 at 16:24

any one did with large tables? please help me… its very urgent?
51 Addison Mar 11th, 2009 at 21:13

is there anyway to remove the Page numbers at the bottom and only have next and prev?
52 Deepak Mar 18th, 2009 at 14:08

Thanks, it is really very usefull…..
53 Vikas Mar 27th, 2009 at 17:05

This is working fine. But I need one more funicationality after Next>> I want All also so that user could see all the recordsr.

(Next>> All) like this. How can I add functionality in Java script.

Please let me know. Thanks in advance.
54 Vinod Mar 30th, 2009 at 10:34

This is nice script and working correctly but i want to implement like 123456…9 so when
i click nine then pages show like 9 10 11 12 13 so plz help me…
THANKS…
55 Poulomi Apr 23rd, 2009 at 10:20

Hi,

Wonderful script for client side pagination. Very easy to understand also. Thanks
56 Petar Dimov Apr 28th, 2009 at 16:43

Hi,

This is nice script and working correctly, but i want to redirect on the same page in pagination when i submit the form. How to do that.

Regards,
57 Luigi Apr 29th, 2009 at 15:09

Hi Petar. Hi everyone.

To redirect on the proper page, it’s a server side stuff: after the actions have been executed you send a redirect command to the browser (HTTP status 302; sendRedirect() in Java) and that should work.

To set the active page for the table you simply call pager.showPage(pageNumber); you can bind that to onload event (http://www.w3schools.com/jsref/jsref_onload.asp), this info also should come from the server.

It shouldn’t be difficult as I was implementing this flow also in my application where I originally implemented the script you are using.

Hope this helps, but I’m sorry I cannot help you further: I am working on other stuff, now and that script it’s very old to me. That script is just an article I made on free time. And people started to ask me many variants; unfortunately I have no time (and money) to invest on it: it’s not a product, it’s just an example.
If you need community or professional support you may want to look at commercial or open source products (Example: http://www.frequency-decoder.com/demo/table-sort-revisited/paginate/), or hire some experts.

Good luck to everyone.
58 Shawn May 13th, 2009 at 02:04

How would you modify this script to paginate the columns rather than the rows?
59 hnin May 20th, 2009 at 08:05

Hi,

Great work. But it doesn’t work if i add runat=”server” to my table. My table is in the asp content place holder using a masterpage. Please help me.

Thanks.
60 Ritu Jun 30th, 2009 at 11:11

Hi,
can someone please send me the code to my mail id – ritu.5586@gmail.com?? I need the code.

Thanks in advance,
Ritu
61 al Jul 4th, 2009 at 03:10

yes could you please send me the code to me too
thanks a lot
62 _adam Jul 15th, 2009 at 08:59

This helps in implementing dynamic pagination..get the value from the textbox
63 Arturo Estigarribia Jul 23rd, 2009 at 22:56

Great Work…, The very nice thing you did for my coding.
Really made my day!
64 Sourav Jul 29th, 2009 at 09:47

Well, indeed this is a gud pagination logic…It helped me a lot thank!
65 Ajumohan Aug 20th, 2009 at 12:16

Can any one help me to create a minimizable table.
66 Beck Aug 29th, 2009 at 16:46

Hi. how can I even hide the table in css? I am generating a table that has more than 1000 data. And this is giving me a problem. I cant see the navigation link.
67 Rahul Aug 30th, 2009 at 11:06

This is awesome pagination code, using javascript
If anybody is getting error for “pager is not defined”
then plase define
var pager = new Pager(’results’, 3);
globally, i.e. outise any function.

and thanks for this wonderful code
68 gautham Sep 6th, 2009 at 07:51

I am working on a project in Struts2- springs 3.5- hibernate 3.5,
In this, we had to collect a list of objects and list them in a jsp.
I acheived all of this. Then i was asked to paginate the data.
I tried using paging tag library and display tag libraries. All of it worked perfect.
Display tag library had no provision for usage of javascript because i was passing all the parameters of the listed record via onclick and then do a form submit cos this method persisted the record.
Now with the usage of display tags i wasnt able to do that. Paging tagLib had its own short cominsg.

YOUR METHOD SOLVED THE PROBLEM.
AWESOME BUDDY
SUPER COOL
THANKS A TON !!!
U ROCK
69 Shashidhar Sep 8th, 2009 at 21:34

Its Very helpful … thanks for the component
70 shweta Sep 19th, 2009 at 11:49

this code helps me lot thanks
71 Angelschein Sep 27th, 2009 at 10:58

I agree with u. I need to imedeatly add it in my RSS
72 Arjun Oct 22nd, 2009 at 16:18

This very use full script coding…..

but i need small change that … pagenation show full total no of pages …. i want first 10 pages…for example : 1 2 3 4 5 67 8910 next >> then i will click next then show next thing…like as 11 12 13,14,15…..20 next>>

plz help me this modification ….

thanks
arjun
73 Stephanie Oct 23rd, 2009 at 13:50

Thanks very much :) Lifesaver :)
74 Rajit Oct 30th, 2009 at 13:29

Great script:-)
75 Valery D Nov 9th, 2009 at 14:41

Thanks! It’s very usefull!
76 sk joshi Nov 13th, 2009 at 07:54

wow its awesome……..
thanks keep it up man………..
u rocks.
77 Girish Jan 22nd, 2010 at 16:31

Hi,
Great script but I want to use this script inside ajax tab control but when I am clicking on Page number its shows an javascript error like ‘pager’ is undefined and paging is not working how can I resolve this issue. So that I can use same script in multiple tabs.

Thanks
78 Jason Feb 2nd, 2010 at 21:28

Luigi,

Seriously… great job. Thank you for a simple but powerful pagination script. I have sifted through bloat-code for several hours… looking for just this script.

Thank you for sharing!!!

J
79 alecrama Feb 7th, 2010 at 18:59

Please help me this pagination doesnt work if I load directly in the table the information from a xml file. Could anyone help me to paginate this kind of table?
80 Kumar Harsh Feb 12th, 2010 at 11:39

This very use full script coding…..

but i need small change that … pagenation show full total no of pages …. i want first 10 pages…for example : 1 2 3 4 5 67 8910 next >> then i will click next then show next thing…like as 11 12 13,14,15…..20 next>>

plz help me this modification ….

This question not yet answered

thanks
harsh
81 lucky Mar 4th, 2010 at 12:33

great stuff !!!! very usefull script

bt can u tell me same script how can i use for div base html

can anybody help me??
82 Candance Katula Mar 5th, 2010 at 03:39

Hi, I found this post while searching for help with JavaScript. I have recently changed browsers from Opera to Microsoft Internet Explorer 5. Now I seem to have a issue with loading JavaScript. Everytime I go on a site that needs Javascript, my computer does not load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any aid is very appreciated! Thanks
83 Rilana Jul 3rd, 2010 at 12:14

Hi thank you for the post… I am really having a problem implementing this in my side. I tryed several scripts, and I think I am having Problems because I wanna use it on a javascript generated table. http://neu.smartpersonal.ch/stellen.php could you please tell me what I need to cahnge in order for this to work for me? I am so despered I just cant find a solution for my problem for days now….. thank you, Rilana
84 Tanuj Bhargava Jul 11th, 2010 at 21:25

Excellent logic man!
Many thanks!