How To Create Simple Cool Paging With PHP and CSS

It is quite common when you need of paging in your web application. A dynamic web is what consists of scripts and renders various pages depends upon the user requirements and where he/she wants to browse the web. Paging, categories, tags are all these type of browsing. We will talk about paging in this article and how to make it with simplest code in PHP. So let’s start:

Paging screen shot: Live example is given below

Step 1: Define CSS styling

Create styling for paging numbers and links. See the code below, don’t worry will show you below how we will use it in this example. Inspired from Flickr and digg.

.paging { padding:10px 0px 0px 0px; text-align:center; font-size:13px;}
.paging.display{text-align:right;}
.paging a, .paging span {padding:2px 8px 2px 8px;}
.paging span {font-weight:bold; color:#000; font-size:13px; }
.paging a {color:#000; text-decoration:none; border:1px solid #dddddd;}
.paging a:hover { text-decoration:none; background-color:#6C6C6C; color:#fff; border-color:#000;}
.paging span.prn { font-size:13px; font-weight:normal; color:#aaa; }
.paging a.prn { border:2px solid #dddddd;}
.paging a.prn:hover { border-color:#000;}
.paging p#total_count{color:#aaa; font-size:12px; padding-top:8px; padding-left:18px;}
.paging p#total_display{color:#aaa; font-size:12px; padding-top:10px;}

Step 2: Create PHP function

The function below will take care of all your paging needs. Will show you how to use it in next step.

function doPages($page_size, $thepage, $query_string, $total=0) {
    //per page count
    $index_limit = 10;

    //set the query string to blank, then later attach it with $query_string
    $query='';

    if(strlen($query_string)>0){
        $query = "&".$query_string;
    }

    //get the current page number example: 3, 4 etc: see above method description
    $current = get_current_page();

    $total_pages=ceil($total/$page_size);
    $start=max($current-intval($index_limit/2), 1);
    $end=$start+$index_limit-1;

    echo '
';

    if($current==1) {
        echo '< Previous ';
    } else {
        $i = $current-1;
        echo '< Previous ';
        echo '... ';
    }

    if($start > 1) {
        $i = 1;
        echo ''.$i.' ';
    }

    for ($i = $start; $i <= $end && $i <= $total_pages; $i++){
        if($i==$current) {
            echo ''.$i.' ';
        } else {
            echo ''.$i.' ';
        }
    }

    if($total_pages > $end){
        $i = $total_pages;
        echo ''.$i.' ';
    }

    if($current < $total_pages) {
        $i = $current+1;
        echo '... ';
        echo 'Next > ';
    } else {
        echo 'Next > ';
    }

    //if nothing passed to method or zero, then dont print result, else print the total count below:
    if ($total != 0){
        //prints the total result count just below the paging
        echo '

(total '.$total.' results)
';
    }

}//end of method doPages()

//Both of the functions below required

function check_integer($which) {
    if(isset($_REQUEST[$which])){
        if (intval($_REQUEST[$which])>0) {
            //check the paging variable was set or not,
            //if yes then return its number:
            //for example: ?page=5, then it will return 5 (integer)
            return intval($_REQUEST[$which]);
        } else {
            return false;
        }
    }
    return false;
}//end of check_integer()

function get_current_page() {
    if(($var=check_integer('page'))) {
        //return value of 'page', in support to above method
        return $var;
    } else {
 buy cialis        //return 1, if it wasnt set before, page=1
        return 1;
    }
}//end of method get_current_page()

Step 3: Usage

Call the doPages() function with proper parameters and you’re done!. See the code below:

//print the paging result
doPages(10, '/paging.php', 'category=sports', 123);

1. First param is ’10′: It means we are displaying 10 results per page.
2. Second param is ‘/paging.php’: It is the page link where we need to link the paging. It can be absolute or relative path.
3. Third param is ‘category=sports’: It is extra query strings that we can pass to function to take care of existing query strings.
4. Fourth param is 123: It is the actual result that is the basis of paging.

For example if we host a page like http://www.mywebsite.com/browse/page.php?category=sports and we want to add paging in it, then we need to call this function like this:
doPages(10, ‘/browse/page.php’, ‘category=sports’, 123);

If we are browsing page 5 then it will make page links like: http://www.mywebsite.com/browse/page.php?page=5&category=sports

A fully functional live example is given below. If you still face any difficulty in using this example. Please feel free to leave your comments.

Related posts: