Friday, April 1, 2011

PHP Pagination

pagination_php1

This is a guide how to create a pagination in PHP like digg.com pagination style 

  1. This is a script to make pagination in PHP like digg.com or flickr.com.

  1. This script was written by a guy from Stranger Studios. In this page I've edit the script a little bit to make it working and easy to edit. You can grab the original script at Digg-Style Pagination. My tutorial is just a guide how to implemente in your PHP script.

    This is what you'll get after finished this code

    pagination_php1

  2. The Code
     

    Grab the code and paste in your text editor.
    You have to customize 7 spots in this code (see images below).

    1. Code to connect to your DB - place or include your code to connect to database.
    2. $tbl_name - your table name.
    3. $adjacents - how many adjacent pages should be shown on each side.
    4. $targetpage - is the name of file ex. I saved this file as pagination.php, my $targetpage should be "pagination.php".
    5. $limit - how many items to show per page.
    6. "SELECT column_name - change to your own column.
    7. Replace your own while..loop here - place your code to echo results here.

    After all, save and test your script.

    <?php
    /*
    Place code to connect to your DB here.
    */
    include('config.php'); // include your code to connect to DB.

    $tbl_name=""; //your table name
    // How many adjacent pages should be shown on each side?
    $adjacents = 3;

    /*
    First get total number of rows in data table.
    If you have a WHERE clause in your query, make sure you mirror it here.
    */
    $query = "SELECT COUNT(*) as num FROM $tbl_name";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    /* Setup vars for query. */
    $targetpage = "filename.php"; //your file name (the name of this file)
    $limit = 2; //how many items to show per page
    $page = $_GET['page'];
    if($page)
    $start = ($page - 1) * $limit; //first item to display on this page
    else
    $start = 0; //if no page var is given, set start to 0

    /* Get data. */
    $sql = "SELECT column_name FROM $tbl_name LIMIT $start, $limit";
    $result = mysql_query($sql);

    /* Setup page vars for display. */
    if ($page == 0) $page = 1; //if no page var is given, default to 1.
    $prev = $page - 1; //previous page is page - 1
    $next = $page + 1; //next page is page + 1
    $lastpage = ceil($total_pages/$limit); //lastpage is = total pages / items per page, rounded up.
    $lpm1 = $lastpage - 1; //last page minus 1

    /*
    Now we apply our rules and draw the pagination object.
    We're actually saving the code to a variable in case we want to draw it more than once.
    */
    $pagination = "";
    if($lastpage > 1)
    {
    $pagination .= "<div class=\"pagination\">";
    //previous button
    if ($page > 1)
    $pagination.= "<a href=\"$targetpage?page=$prev\">« previous</a>";
    else
    $pagination.= "<span class=\"disabled\">« previous</span>";

    //pages
    if ($lastpage < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up
    {
    for ($counter = 1; $counter <= $lastpage; $counter++)
    {
    if ($counter == $page)
    $pagination.= "<span class=\"current\">$counter</span>";
    else
    $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
    }
    }
    elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some
    {
    //close to beginning; only hide later pages
    if($page < 1 + ($adjacents * 2))
    {
    for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
    {
    if ($counter == $page)
    $pagination.= "<span class=\"current\">$counter</span>";
    else
    $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
    }
    $pagination.= "...";
    $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
    $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
    }
    //in middle; hide some front and some back
    elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
    {
    $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
    $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
    $pagination.= "...";
    for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
    {
    if ($counter == $page)
    $pagination.= "<span class=\"current\">$counter</span>";
    else
    $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
    }
    $pagination.= "...";
    $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
    $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
    }
    //close to end; only hide early pages
    else
    {
    $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
    $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
    $pagination.= "...";
    for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
    {
    if ($counter == $page)
    $pagination.= "<span class=\"current\">$counter</span>";
    else
    $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
    }
    }
    }

    //next button
    if ($page < $counter - 1)
    $pagination.= "<a href=\"$targetpage?page=$next\">next »</a>";
    else
    $pagination.= "<span class=\"disabled\">next »</span>";
    $pagination.= "</div>\n";
    }
    ?>

    <?php
    while($row = mysql_fetch_array($result))
    {

    // Your while loop here

    }
    ?>

    <?=$pagination?>




    These are where you have to customize the script

    pagination_php2










    Apply CSS Style to your code








    pagination_php3


      3.Apply CSS Style to your code







Save this code to style.css and link to your pagination page.

To get more CSS style click here



pagination_php4



div.pagination {
padding: 3px;
margin: 3px;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;

text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;

color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;

font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;

color: #DDD;
}

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Powered by Blogger.