CODEWITHSUNDEEP
phptwitter-bootstrappagination
Edwardo
Edwardo

Reputation: 643

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>

Upvotes: 2

Views: 23720

Answers (3)

Waqas Ali
Waqas Ali

Reputation: 1327

For Bootstrap 4 , use following classes

<li class='page-item'>
<a class='page-link' href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'> < </a>
</li>

Don't forget the anchor tag for active item, just put a hash instead of page link

<li class='page-item active'><a class='page-link' href='#'>$x</a></li>

Upvotes: 0

Dazza
Dazza

Reputation: 136

Further to David Taiaroa's answer above, for the active button state you need to add the class="active" and A tags.

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

..becomes..

echo " <li class=\"active\"><a>$x</a></li> ";

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

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!

Upvotes: 3

Related Questions