Pagination: Highlight Current Number Button

Question

I have been struggling with highlighting the current page number button. The pagination works perfectly. The buttons all come up alright as well as when you hover above the buttons. However I want to code the current page number button to have the same style as the hover's:

    <?php
    $num_rec_per_page=5;
    $connection=mysqli_connect("host","username","password","database");

    $sqlOne = "SELECT * FROM databaseTable";
    $rs_result = mysqli_query($connection,$sqlOne); //run the query
    $total_records = mysqli_num_rows($rs_result);  //count number of records
    $total_pages = ceil($total_records / $num_rec_per_page); 
    $thing = $total_pages-2;




    if (mysqli_connect_errno())
        {
        echo "The application has failed to connect to the mysql database server: " . mysqli_connect_error();
        } //The statement of unsuccessful connection //If connection is unsuccessful

    if (isset($_GET["page"])) 
    { 
        $page  = $_GET["page"]; 
    } 
    else 
    { 
        $page=1; 
    } 
    $start_from = ($page-1) * $num_rec_per_page; 
    $sql = "SELECT * FROM databaseTable ORDER by ID LIMIT $start_from, $num_rec_per_page"; 
    $rs_result = mysqli_query ($connection,$sql); //run the query

    $next_page = $page + 1;
    $prev_page = $page - 1;



    echo("<div class='paginateMainTopContainer'>"); 
    echo("<div class='paginateSubTopContainer'>");  
    echo("<div class='paginateContainer' align='center'>");         
    echo("<div class='paginateTop' align='center'>");
    echo "<a href='?page=1' class='pageButtonLast'>".'First'."</a> "; // Goto 1st page 

    if ($page > 1)
    echo "<a href='?page=".$prev_page."' class='pageButtonLast'>".'Previous'."</a> "; // Goto last page
    else
    echo "<a href='?page=1' class='pageButtonLast'>".'Previous'."</a> "; // Goto last page

    //for ($i=1; $i<=$total_pages; $i++) { 
    if($page<=1)
        for ($i=max(1, $page - 4); $i<=min($page + 4,$total_pages); $i++) 
        { 
            echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
        }

    elseif($page>=$total_pages)
        for ($i=max(1, $page - 4); $i<=min($page + 4,$total_pages); $i++) 
        { 
            echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
        } 

    elseif($page>2 && $page<=$thing)///////////////////
        for ($i=max(1, $page - 2); $i<=min($page + 2,$total_pages); $i++) 
        { 
            echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
        } 

    elseif($page>$thing)
        for ($i=max(1, $page - 3); $i<=min($page + 3,$total_pages); $i++) 
        { 
            echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
        } 

    elseif($page=2)
        for ($i=max(1, $page - 3); $i<=min($page + 3,$total_pages); $i++) 
        { 
            echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
        } 



    if ($page < $total_pages)
    echo "<a href='?page=".$next_page."' class='pageButtonLast'>".'Next'."</a> "; // Goto last page
    else
    echo "<a href='?page=".$total_pages."' class='pageButtonLast'>".'Next'."</a> "; // Goto last page

    echo "<a href='?page=$total_pages' class='pageButtonLast'>".'Last'."</a> "; // Goto last page
    echo("</div>");
    echo("</div>");
    echo("</div>");
    echo("</div>");

    ?> 


    .paginateMainTopContainer{
        background:#FFFFFF;
        --width:100%;
        width:1599px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
    }

    .paginateSubTopContainer{
        position:relative;
        display:block;
        --background:#000000;
        width:1000px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
        --top:160px;
        --border:1px solid;
    }

    .paginate{
        position:relative;
        display: inline;
        --top:635px;
        --left:130px;
        --text-align: left;
        color: #5F5F5F;
        font-family: "Gothic", Verdana, serif;
        font-size: 14px;
        --width:100%;
        --padding:0;
        left: auto;
        right: auto;
    }

    .paginateContainer{
        position:relative;
        --border: 1px solid;
        width:100%;
        top:12px;
        height:30px;
    }

    .paginateContainerTwo{
        border: 0px solid;
        width:100%;
        --height:50px;
    }

    .paginateTop{
        position:relative;
        display: inline;
        --top:610px;
        --left:130px;
        --text-align: left;
        color: #5F5F5F;
        font-family: "Gothic", Verdana, serif;
        font-size: 14px;
        --width:5000px;
        --padding:0;
        --left: 500px;
        --right: 500px;
        left: auto;
        right: auto;
    }

    .pageButton{
        display: inline-block;
        position:relative;
        background-image: url('images/paginateButtons1.png');
        max-width:28px;
        max-height:28px;
        min-width:28px;
        min-height:28px;
        background-repeat:no-repeat;
        background-size:28px 28px;
        padding:5px 0px 0px 0px;
        --border:1px solid;
        --margin-left: auto;
        --margin-right: auto;
        text-align:center;
    }

    .pageButton:hover{
        display: inline-block;
        position:relative;
        background-image: url('images/paginateButtons2.png');
        width:28px;
        height:28px;
        background-repeat:no-repeat;
        background-size:28px 28px;
        padding:5px 0px 0px 0px;
        --border:1px solid;
        margin-left: auto;
        margin-right: auto;
    }

    .pageButton a.current{
        display: inline-block;
        position:relative;
        background-image: url('images/paginateButtons2.png');
        width:28px;
        height:28px;
        background-repeat:no-repeat;
        background-size:28px 28px;
        padding:5px 0px 0px 0px;
        --border:1px solid;
        margin-left: auto;
        margin-right: auto;
    }


    .pageButtonLast{
        display: inline-block;
        position:relative;
        background-image: url('images/paginateButtons3.png');
        width:74px;
        height:28px;
        background-repeat:no-repeat;
        background-size:74px 28px;
        padding:5px 0px 0px 0px;
        --border:1px solid;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
    }

    .pageButtonLast:hover{
        display: inline-block;
        position:relative;
        background-image: url('images/paginateButtons4.png');
        width:74px;
        height:28px;
        background-repeat:no-repeat;
        background-size:74px 28px;
        padding:5px 0px 0px 0px;
        --border:1px solid;
        margin-left: auto;
        margin-right: auto;
    }

Also really sorry if I have uploaded the code incorrectly - still trying to get a hang of this.

Answer 1

if i am not wrong you missing just one thing, you have to just create one active class that to highlighting current button and have to add below codes where you displaying the buttons.

see this code work or not for you

if($page==$i)
{
 echo "<a href='?page=".$i."' class='active'>".$i."</a> ";// please make .active class in your style   
}
else{
 echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> "; 
 }