Search code examples
phptwitter-bootstrappagination

How to use bootstrap pagination with php


I am a working with php and mysql and I managed to do pagination following this tutorial: http://www.phpfreaks.com/tutorial/basic-pagination

Here is "mywebpage" (on work): http://ada.uprrp.edu/~ehazim/hpcf_proj/miejemplo.php

But Now, I want to make it "pretty" using bootstrap Pagination:http://getbootstrap.com/components/#pagination

I am using _GET['current_page'] to get the page where I am. The problem is that I dont know how to change the echo's to echo the pagination from bootstrap... Yes, it may be stupid, but It is my first time with php and I am like 2 hours just trying to do this. Can someone help me? Below is the code that I have, following the tutorial of php freaks (which I understand, except for some echos with toomany quotes :/ ):

    <div class="pagination">
    <ul>

    <?php
    /******  build the pagination links ******/
    // if not on page 1, don't show back links
    if ($currentpage > 1) {
        // show << link to go back to page 1
        # TRYING TO CHANGE HERE AND IN OTHER ECHOS  
        #echo "<li><a href=\"{$_SERVER['PHP_SELF']}?currentpage=1\">&laquo;</a></li>";
        echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=1'><<</a> ";
        // get previous page num
        $prevpage = $currentpage - 1;
        // show < link to go back to 1 page
        #echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><</a> ";
        echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><</a> ";
    } // end if

    # range of num links to show
    $range = 3;

    # loop to show links to range of pages around current page
    for ($x = ($currentpage - $range); $x < (($currentpage + $range)  + 1); $x++) {
        // if it's a valid page number...
        if (($x > 0) && ($x <= $totalpages)) {
        // if we're on current page...
            if ($x == $currentpage) {
            // 'highlight' it but don't make a link
                echo " [<b>$x</b>] ";
        // if not current page...
        }
        else {
            // make it a link
            echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a> ";
        } // end else
    } // end if 
} // end for


    // if not on last page, show forward and last page links        
    if ($currentpage != $totalpages) {
        // get next page
        $nextpage = $currentpage + 1;
        // echo forward link for next page 
        echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'>></a> ";
        // echo forward link for lastpage
        echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'>>></a> ";
     } // end if
     # end build pagination links 
?>

</ul>
</div>

Solution

  • To get you started, Bootstrap pagination works on a ul of class = pagination with the page links as list items.

    Towards the start of your php code add the pagination class to the ul (not the div)

    <ul class="pagination">  
    

    Then wherever you echo a page link, wrap it with li tags, e.g.

    echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a> </li>";  
    

    EDIT
    You also want to tweak the HTML for the current page by changing

    echo " [<b>$x</b>] ";  
    

    to

    echo " <li>$x</li> ";
    

    Edit
    If you want to center your pagination bar, Bootstrap 3 has a the text-center class which you can use. See http://jsfiddle.net/panchroma/8RHzw/
    Change the first line of your php to

    <div class="text-center">
    

    With Bootstrap 2, use

    <div style="text-align:center;">
    

    Hope this helps!