tags:

views:

91

answers:

3

I have the following method that creates and returns markup for my pagination links in PHP.

public function getPaginationLinks($options) {
    if($options['total_pages'] > 1) {
        $markup = '<div class="pagination">';

        if($options['page'] > 1) {
            $markup .= '<a href="?page=' . ($options['page'] - 1) . ((isset($options['order_by'])) ? "&sort=" . $options['order_by'] : "") . '">< prev</a>';
        }       

        for($i = 1; $i <= $options['total_pages']; $i++) {

            if($options['page'] != $i) {
                $markup .= '<a href="?page='. $i . ((isset($options['order_by'])) ? "&sort=" . $options['order_by'] : "") . '">' . $i . '</a>';
            }
            else {
                $markup .= '<span class="current">' . $i . '</span>';
            }
        }

        if($options['page'] < $options['total_pages']) {
            $markup .= '<a href="?page=' . ($options['page'] + 1) . ((isset($options['order_by'])) ? "&sort=" . $options['order_by'] : "") . '">next ></a>';
        }

        $markup .= '</div>';

        return $markup;
    }
    else {
        return false;
    }
}

I just recently discovered (to my surprise) that i had reached 70+ pages which means that there are now 70+ links showing up at the bottom..

I'm wondering if someone can help me break this up.. I'm not sure how most pagination works as far as showing the numbers if im on say.. page 30, ideas?

+1  A: 

You just display the current page plus the previous and the following x (say 4) pages.

If you're on Page 1:

1 2 3 4 5

Page 35:

31 32 33 34 35 36 37 38 39

Page 70:

66 67 68 69 70

You could also add a quick link to the first and last page using « and » for instance.


Example:

$x = 4;

for ($i = $currentPage - $x; $i < $currentPage; $i++)
{
    if ($i >= 1) { /* show link */}
    else { /* show ellipsis and fix counter */ $i = 1; }
}

/* show current page number without link */

for ($i = $currentPage + 1; $i < $currentPage + $x; $i++)
{
    if ($i <= $totalPages) { /* show link */}
    else { /* show ellipsis and break */ break; }
}

You can also implement Infinite History / Pagination, which is uber cool. =)


UPDATE: A more elegant version of this @ Codepad.

Alix Axel
A: 

You could do (on page 15)

[View Previous] 12 13 14 [15] 15 17 18 [View More]

Where the [View More] link fetches the rest (or just a few more) page links. This keeps things uncluttered while allowing the user to navigate all the pages.

Example (after clicking View Previous)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 [15] 15 17 18 [View More]

or (just show a few more) [View More] 7 8 9 10 11 12 13 14 [15] 15 17 18 [View More]

When I say "fetch" I mean use javascript to create links to the other pages w/o reloading the page

Chris T
Have you seen this before? Examples?
Rabbott