Pagination Function - Rounded Gradient Buttons

By Hawkee on Mar 21, 2011

Screenshots

This function will return a list of page numbers similar to the Google search results style. It will currently show up to 15 page numbers at a time and this value can be adjusted within the function.

Your code will need to handle the $_REQUEST['p'] value itself.

HTML example:

<div class='pages'>
<?php print display_pages($total_pages, $current_page, $items_per_page, $page_url); ?>
</div>

You may use this stylesheet to match the screenshot:

.pages {
    text-align: center;
    width: 646px;
    padding-bottom: 20px;

    padding: 2px 8px;
    border: solid 1px #CCC;
    color: #000;

    border-radius: 8px;
    -moz-border-radius: 8px;
    background: -moz-linear-gradient(top, #FFF, #EAEAEA);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EAEAEA));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFF', EndColorStr='#EAEAEA', GradientType=0);
}

.pages a:hover, .pages .current {
    color: #FFF;
    background: #999;
    border: 1px solid #999;
}
/************************************************************************************/
// Takes in the number of items, the current page and the number of items per page
// to build a list of links.  The $page_url needs to be sent from the calling script.

function display_pages($items, $page, $show, $page_url) {
    if($page > 1) {
        $previous_page = $page - 1;
        $previous_url = "$page_url&p=$previous_page";
        // Make sure the first parameter begins with a ? and not a &
        $previous_url = preg_replace("/\/\&/", '/?', $previous_url);
        $previous = "<a href='$previous_url'><b>Prev</b></a>&nbsp;";
    }

    $s = ($page + 1) * $show;
    if($s < $items) {
        $next_page = $page + 1;
        $next_url = "$page_url&p=$next_page";
        // Make sure the first parameter begins with a ? and not a &
        $next_url = preg_replace("/\/\&/", '/?', $next_url);
        $next = "<a href='$next_url'><b>Next</b></a>";
    }

    $total_pages = $items / $show;

    // Number of page links to show.
    if(($page + 1) == $total_pages) {
        $page_numbers = 15;
    }
    else if($page > 0) {
        if($page < 7) {
            $page_numbers = 15 - $page;
        }
        else {
            $page_numbers = 7;
        }
    }
    else {
        $page_numbers = 15;
    }

    for($page_inc = $page - $page_numbers; $page_inc <= $page + $page_numbers; $page_inc++) {
        $print_num = $page_inc + 1;

        if($page_inc >= 0 and $page_inc < $total_pages) {
            if($page_inc != $page) {
                $page_link = "$page_url&p=$page_inc";
                $page_link = preg_replace("/\/\&/", '/?', $page_link);
                $page_links .= "<a href='$page_link'>$print_num</a>&nbsp;";
            }
            else {
                $page_links .= "<span class='current'>$print_num</span>&nbsp;";
            }
        }
    }

    if($next or $previous) {
        if($next and $previous) {
            $link = $previous.$page_links.$next;
        }
        else if($next) {
            $link = $page_links.$next;
        }
        else if($previous) {
            $link = $previous.$page_links;
        }
    }

    return $link;
}

Comments

Sign in to comment.
Hawkee   -  Oct 04, 2012

@sean Quite a change: 30% Firefox, 39% Chrome, 12% IE in 2012 vs 43% Firefox, 25% Chrome and 19% IE in 2011

 Respond  
sean   -  Oct 04, 2012

@Hawkee On an unrelated note, any update on the firefox/chrome/ie percentages a year and a half later?

 Respond  
Hawkee   -  Oct 03, 2012

The CSS is a separate issue. Just get the functionality right first then you can worry about how it looks later.

 Respond  
TMFKSOFT   -  Oct 03, 2012

Im using your example with some test numbers. It looks like the CSS is wrong or something :/

 Respond  
Hawkee   -  Oct 02, 2012

Hard to say. What as you passing to the function? This looks like you're on page 2 of two pages.

 Respond  
TMFKSOFT   -  Oct 02, 2012

I see:
http://screenshotuploader.com/s/01/IeUSR6YuL
Any idea what I have done wrong?

 Respond  
Hawkee   -  Oct 02, 2012

@TMFKSOFT I see the problem. The example was missing the print call. I fixed it.

 Respond  
TMFKSOFT   -  Oct 02, 2012

I couldn't get it working, It just showed a 3px high bar with nothing on, no matter what values I gave it. :/
You could do with adding an example of what the pars should be string/integer/array etc.

Thanks,
Thomas

 Respond  
Hawkee   -  Oct 02, 2012

@TMFKSOFT Good catch, $template was something I used a while back. I removed it. This function just builds a list of links to the current page. You have to make your own page and content.

 Respond  
TMFKSOFT   -  Oct 02, 2012

I'm either incredibly stupid or I dont know.
Where does the page content go?
Plus what's the deal with $template, It's not used anywhere?

 Respond  
Hawkee   -  Jun 07, 2011

@Typo The way I see it most IE8 users are probably used to a square looking internet, so they probably won't mind.

 Respond  
Typo   -  Jun 07, 2011

In response to the earlier comment about IE8 becoming less prominent, I'm afraid that won't happen as soon as we might like. Many people are stubbornly happy on their Windows XP systems and for good reason, it was a pretty decent OS.

Microsoft has made the decision for some reason or other to not support XP in IE9 regardless of how many people are still running it and the fact that other programs such as FireFox can support current standards for all current OS's including XP. It is explained pretty well in http://download.cnet.com/8301-2007_4-20043103-12.html .

As long as XP users cannot use IE9 we will have to continue to offer backwards compatibility for some time to come. I expext IE8 to be the next generations thorn in the side like IE6 proved to be as long as IE9 cannot run on XP.

Just my opinion.

BTW, nice snippet Hawkee, I'm about to release a similar one but mine isn't styled nearly as nice.

 Respond  
Hawkee   -  Mar 22, 2011

Only about 1% of our traffic here is using IE6, but this is a much more tech savvy audience so that's to be expected. We're currently at 43% Firefox, 25% Chrome and 19% IE.

 Respond  
irchainscriptz   -  Mar 21, 2011

Have to agree there a Lot of people are still using IE6 LOL

 Respond  
Hawkee   -  Mar 21, 2011

I wouldn't suggest kicking IE users off a site as they probably just don't know how to switch or why they should. I've seen a steady decline of IE users here at Hawkee over the years, so it's really just part of the natural flow of things. No need to push it along.

 Respond  
[Plornt]   -  Mar 21, 2011

Although its bad, I usually kick off all my IE users and tell them to feckoff and get a better browser. Fun to do even though its pretty much removing alot of users.

IE9 seems to finally start to catch up with todays standards hopefully this is the start of browsers working together to make a standard which is actually a standard.

 Respond  
Hawkee   -  Mar 21, 2011

Thank you, but unfortunately the rounded corners don't work on IE8. I'm hoping IE9 becomes widely adopted quickly so we can put this whole lack of functionality in IE behind us.

And yes I'm happy to see the influx of PHP code. After reviewing my statistics I noticed my PHP code has the highest number of pageviews by far.

 Respond  
[Plornt]   -  Mar 21, 2011

Nice! I usually find pagination to be one of those things I end up rewriting for every project because A) I lose it B) I cant be bothered to find it in my other files same with logins. I might pop up my user class on here for easy user creation on sites of which I keep for all my projects. Nice to see a small influx(Oxymoron?) of PHP scripts ^^

I also like the styling, sleek and modern (in my eyes)!

(I commented earlier but forgot to click post >.> so now it looks like im only commenting on yours because you commented on mine xD)

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.