HTML tables with jQuery pagination

Question

I am trying to create a table such that when there are more than 10 rows I want to create a hyperlink which tells the user to go on the next page. The concept is called pagination, but how can I achieve it with jQuery/ JavaScript?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Table</title>
        <style type="text/css">
            th {
                background-color: #ddd;
            }
            th td {
                 border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <th>Heading1</th>
            <th>Heading2</th>
            <tbody>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
                <tr></tr>
            </tbody>
        </table>
    </body>
</html>

Are you using a server-side language?

karim79
– karim79

2010-11-28 00:54:59 +00:00
Commented Nov 28, 2010 at 0:54 — karim79
– karim79, Commented Nov 28, 2010 at 0:54

Orbling · Accepted Answer · 2010-11-28 01:14:29Z

18

Alternatively to the plugin, if you want to see simplified code so you can educate yourself as to how pagination works, have a look at this fiddle I knocked up for you.

http://jsfiddle.net/29W9Q/

The code simply binds two buttons, previous and next to change the visibility of the rows of the table that you specified. Each time a button is clicked, the steps are: see if you can move backward or forward, hide the current rows, find the rows that should be visible, 10 up or 10 down, and then make them visible. The rest of the code is to illustrate the example.

The real jQuery work is being done by the less-than and greater-than selectors: :lt() and :gt(), to select the rows for hiding/showing.

var maxRows = 10;
$('.paginated-table').each(function() {
    var cTable = $(this);
    var cRows = cTable.find('tr:gt(0)');
    var cRowCount = cRows.size();

    if (cRowCount < maxRows) {
        return;
    }

    /* add numbers to the rows for visuals on the demo */
    cRows.each(function(i) {
        $(this).find('td:first').text(function(j, val) {
           return (i + 1) + " - " + val;
        }); 
    });

    /* hide all rows above the max initially */
    cRows.filter(':gt(' + (maxRows - 1) + ')').hide();

    var cPrev = cTable.siblings('.prev');
    var cNext = cTable.siblings('.next');

    /* start with previous disabled */
    cPrev.addClass('disabled');

    cPrev.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));

        if (cPrev.hasClass('disabled')) {
            return false;
        }

        cRows.hide();
        if (cFirstVisible - maxRows - 1 > 0) {
            cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
        } else {
            cRows.filter(':lt(' + cFirstVisible + ')').show();
        }

        if (cFirstVisible - maxRows <= 0) {
            cPrev.addClass('disabled');
        }

        cNext.removeClass('disabled');

        return false;
    });

    cNext.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));

        if (cNext.hasClass('disabled')) {
            return false;
        }

        cRows.hide();
        cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();

        if (cFirstVisible + 2 * maxRows >= cRows.size()) {
            cNext.addClass('disabled');
        }

        cPrev.removeClass('disabled');

        return false;
    });

});

answered Nov 28, 2010 at 1:14

Orbling

20.7k4 gold badges56 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chromedude Over a year ago

+1 that is very helpful. I hate using plugins unless absolutely necessary because I like to have full customize-ability of the code and not have to work with the code they made.

Orbling Over a year ago

@chromedude Agreed, although reinventing the wheel is "bad" - it helps to know exactly what is going on in case you need to change it subtly. Clients are not keen on the answer "it doesn't do that" coming from their developers. jQuery (and the draggable/droppable UI classes) are about the only JS libraries I use.

Vincent Over a year ago

how about having like (<< 1 2 3 >>) is there someone can do that? :) thanks.

Orbling Over a year ago

@user2789695: Whilst directly related, that's a large expansion on what is there, as it's not the most easy thing to bolt on to this example. There are almost certainly other answers demonstrating this on the site.

Collectives™ on Stack Overflow

HTML tables with jQuery pagination

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related