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:

  1. include the javascript using <script src="pager.js"> in your page header;
  2. include a small css to skin the page navigation-bar (i.e. for emphasizing the selected page using bold and underline style);
  3. define an ID on the table you want to scroll. i.e. <table id="results"> ;
  4. place an empty <div/> in the place you want to display the navigation bar. i.e. <div id="pageNavPosition"> ;
  5. include an initialization script at the bottom of your page like this:
    <script type="text/javascript"><!--
        var pager = new Pager('results', 3); 
        pager.init(); 
        pager.showPageNav('pager', 'pageNavPosition'); 
        pager.showPage(1);
    //--></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.


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

  1. 1 Riccardo Pasquini

    great idea to use directly the table rows style
    i will probably steal yr snippet ;)

  2. 2 Luigi

    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. 3 sandip

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

  4. 4 Luigi

    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"> &#171 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. 5 vivekanandk

    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. 6 Vivekanand

    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. 7 santosh

    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. 8 David Levin

    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. 9 Shivaram

    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. 10 Sebastian

    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. 11 Sebastian

    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. 12 Karthikeyan

    Hi,

    You are GREAT. Your script worked a lot for me. Thanks for providing this script.

  13. 13 Abhishek Khandelwal

    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. 14 yoshi

    thanks alot for this code. cheers

  15. 15 sunil

    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. 16 Keshav

    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. 17 Kobe

    hey, great script, but how exactly do i make it for large tables?

  18. 18 Kobe

    No problem, i got it working…. amazin amazing script…. thanks a whole lot…

  19. 19 Tajudeen

    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. 20 Luigi

    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. 21 Jali

    great!! thanks for this script!!

  22. 22 Bakiyalakshmi

    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. 23 Vincenzo

    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. 24 Luigi

    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. 25 Vincenzo

    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. 26 Hari

    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. 27 Balu

    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. 28 Mark

    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. 29 Luigi

    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. 30 satish

    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. 31 Venkat

    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. 32 Waqas

    Good work brother…

  33. 33 Shweta

    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. 34 Cees

    @Shweta: Make sure you’ve included the .js file before calling functions from it, see the example.

  35. 35 kailash

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

    Thank u in advance.

  36. 36 Annin

    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. 37 Amy

    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. 38 WordByWordHut.com

    Very Nice

  39. 39 deepak

    Hai this code very use full to me………….
    thank u

  40. 40 Yaghwin

    HI,

    Thanks for such a wonderful script.
    you rock buddy!!!

  41. 41 Enrico

    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. 42 Mansi

    Hi ,

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

    Thanks in advance,

  43. 43 NomogoLoula

    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. 44 Arun Prasanna

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

    thank you

  45. 45 Robin

    Super cool. This works like a charm for me!

    Thanks

  46. 46 Siva

    Hi,

    Your code is very helpful for me..Thanx a lot

  47. 47 Amol

    Very nice Script…………
    ……………………………

  48. 48 azhar

    Hi,
    How do i go to first page using this code?

  49. 49 visu

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

    thank in advance

  50. 50 Karthik

    any one did with large tables? please help me… its very urgent?

  51. 51 Addison

    is there anyway to remove the Page numbers at the bottom and only have next and prev?

  52. 52 Deepak

    Thanks, it is really very usefull…..

  53. 53 Vikas

    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. 54 Vinod

    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. 55 Poulomi

    Hi,

    Wonderful script for client side pagination. Very easy to understand also. Thanks

  56. 56 Petar Dimov

    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. 57 Luigi

    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. 58 Shawn

    How would you modify this script to paginate the columns rather than the rows?

  59. 59 hnin

    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. 60 Ritu

    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. 61 al

    yes could you please send me the code to me too
    thanks a lot

  62. 62 _adam

    This helps in implementing dynamic pagination..get the value from the textbox

  63. 63 Arturo Estigarribia

    Great Work…, The very nice thing you did for my coding.
    Really made my day!

  64. 64 Sourav

    Well, indeed this is a gud pagination logic…It helped me a lot thank!

  65. 65 Ajumohan

    Can any one help me to create a minimizable table.

  66. 66 Beck

    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. 67 Rahul

    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. 68 gautham

    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. 69 Shashidhar

    Its Very helpful … thanks for the component

  70. 70 shweta

    this code helps me lot thanks

  71. 71 Angelschein

    I agree with u. I need to imedeatly add it in my RSS

  72. 72 Arjun

    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. 73 Stephanie

    Thanks very much :) Lifesaver :)

  74. 74 Rajit

    Great script:-)

  75. 75 Valery D

    Thanks! It’s very usefull!

  76. 76 sk joshi

    wow its awesome……..
    thanks keep it up man………..
    u rocks.

  77. 77 Girish

    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. 78 Jason

    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. 79 alecrama

    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. 80 Kumar Harsh

    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. 81 lucky

    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. 82 Candance Katula

    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. 83 Rilana

    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. 84 Tanuj Bhargava

    Excellent logic man!
    Many thanks!

  85. 85 WebUser

    I am hitting a IE bug, i think – the pager works fine in firefox, but does not work in IE – gives a null error. Not sure what i am missing – any clues? – thanks,

    in the javascript file – line 51:

    oldPageAnchor.className = 'pg-normal';

  86. 86 Data

    Thanks a lot people..! Great help for me :)

  87. 87 Terry

    Hi !

    Thanks for your great contribution, it works very good on my page.

    I found a strange issue, if I set 20 rows in a page like this.

    var pager = new Pager(‘productresult’, 20);

    only 19 rows will be shown on first page, and leave on more row in last page.

    Could you please help me to find out reason why? Thank.

  88. 88 Jeff

    Hi, how do I use this javascript/jquery with mysql queries so that i get results from a mysql table and then paginate it?

  89. 89 Smm

    Hi,

    Ur script really helped me.

    Thanks a lot !!

  90. 90 Chris

    Looks like the comment system doesn’t like code blocks… here’s what i changed:

    For header skip/or not stuff:
    Add
    this.skipHeader = false;
    to the constructor

    change the for loop in showRecords to initialize i with:
    (this.skipHeader) ? i=1:i=0

    in showPage, update the calculation for from to be:
    var from = (pageNumber – 1) * itemsPerPage ((this.skipHeader) ? 1:0);

    in init, update the record calculation to be:
    var records = (rows.length – ((this.skipHeader) ? 1:0));

    For multiple paginated tables per page:
    in showPage and showPageNav update the id creation to include the tableName
    showPage:
    var oldPageAnchor = document.getElementById(this.tableName ‘_pg_’ this.currentPage);
    showPageNav:
    id=”‘ this.tableName ‘_pg_’ page ‘”

    To only show pagination for tables with more than 1 page:
    put a conditional block around the output of the paging navigation (needed in showPage and showPageNav)
    if (this.pages>1)
    {
    //paging stuff
    }

  91. 91 Jaap de Jong

    Hej There,

    i need some help with this script, i got 2 tables on the same page and both need this function, so what i read in the comments is that i’ve got change it like this

    it works fine, they now both act seperatly, but the problem is, if i navigate on the second table, the numbers aren’t getting bold or underlined, he does that on the first table.

    so i’ve i pres page 2 on the second table the 2 in the first table gets bold.

    can you help fix this?

    Thanks a lot!

  92. 92 Jefrim Keijzer

    Here is the code fixed for more tables. All you have to do in the HTML file is make sure that the pager name, results name and the pageNavPosition is unique.

    .pg-normal {
    color: black;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    }
    .pg-selected {
    color: black;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    }

    #
    field

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

     

    #
    field

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

     

  93. 93 jamal

    Many tankys brother

    God bless you ;)

  94. 94 Tom Carnevale

    Nice neat elegant script. And it doesn’t use jQuery.

  95. 95 tenshi

    I have the same problem WebUser posted at Aug 7th 2010.

    In IE 9 the rows.length gives back the wrong value.

    It would be nice to get some help:)

  96. 96 codehelper

    I have modified that code and added google like pagination on this link:

    http://codehelping.blogspot.com/2011/04/html-table-pagination.html

  97. 97 karthi

    Hi Pls In Need the Code In Google Search via

    regards

    karthi

  98. 98 Samarjit Roy

    Hey your code was great, I had modified the Script to show First page and Last page direct links, hope you don’t mind.

    And please let me know If I use your work, how may I attribute it to you. Will mentioning you blog name be good enough ?

  99. 99 tealAcutt

    Hi nice post you have going here.

  100. 100 shoommese

    Many thanks.

  101. 101 Churk

    I took the liberty to modify this so the pagination numbering look a little more organizable. Major Code change is on showPageNav(), and added showPageNav() call to all of the prev(), next(), and showPage().

    There is a slight change to init. Here it is:

    var pager = new Pager('panel', 10);
    pager.init();
    pager.showPageNav('pager', 'pageNavPosition', 1);
    pager.showPage(1);


    function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
    this.positionId = '';
    this.pageName = '';

    this.showRecords = function(from, to) {
    var rows = document.getElementById(tableName).rows;
    // i starts from 1 to skip table header row
    for (var i = 1; i < rows.length; i ) {
    if (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);

    if (pageNumber == 1) {
    document.getElementById('prev').style.display = 'none';
    } else {
    document.getElementById('prev').style.display = 'block';
    }

    if (pageNumber == this.pages) {
    document.getElementById('next').style.display = 'none';
    } else {
    document.getElementById('next').style.display = 'block';
    }

    this.showPageNav(this.pageName, this.positionId, pageNumber);
    }

    this.prev = function() {
    if (this.currentPage > 1) {
    this.showPage(this.currentPage - 1);
    this.showPageNav(this.pageName, this.positionId, this.currentPage);
    }
    }

    this.next = function() {
    if (this.currentPage < this.pages) {
    this.showPage(this.currentPage 1);
    this.showPageNav(this.pageName, this.positionId, this.currentPage);
    }
    }

    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, position) {
    if (!this.inited) {
    alert("not inited");
    return;
    }
    this.pageName = pagerName;
    this.positionId = positionId;

    var pagerHtml = ' &#171 Prev | ';
    if (position > 6) {
    pagerHtml = '... | ';
    }
    for (var page = (position - 5 > 0 ? position - 5 : 1); page this.pages ? this.pages : position 6); page ) {
    pagerHtml = '' page ' | ';
    }
    if (position 5 < this.pages) {
    pagerHtml = '... | ';
    }
    pagerHtml = ' Next »';

    document.getElementById(positionId).innerHTML = pagerHtml;
    }
    }

  102. 102 Shankar

    Hi ,

    i need “<>” implementation in this same pagination . First should come before Previous link and Last should come after Next link. can anyone help ….

    Thanks in advance.

  103. 103 faisal

    hi!!
    thanx for the code. It really helps. I want to change style sheet even when I place pointer to any page number. Please help me

  104. 104 Ali

    Excellent Script. Really does the job but just one thing, my table actually pulls the content and calculate rank before displaying. What happens when I pull the content, it only sort the ranks of current page content rather than the complete table. Once clicked, it does trigger and sort the complete ranks but can’t see a possible quick way to fix it.

    In either case, it does the job and is very helpful. Thanks for sharing.

  105. 105 Jonathan

    Do any of you know how to eliminate the numbers at the bottom of the page?

  1. 1 Kevin Le - Unless you spread your winds, you will never know how high you can fly » Pagination on web pages
  2. 2 Efficient pagination using SQL and JavaScript « Blog de Pedro Alonso Martinez Nicolas
  3. 3 JS Error in IE 8… “Object Required” - Programmers Goodies
  4. 4 Is there a good step by step tutorial on javascript pagination? - Programmers Goodies



Calendar

September 2006
M T W T F S S
« Aug   Oct »
 123
45678910
11121314151617
18192021222324
252627282930  

Follow me

twitter flickr LinkedIn feed

Subscribe by email

Enter your email address:

Archives


Categories

Tag Cloud


Listening