分页:突出显示当前数字按钮

时间:2017-05-04 10:49:13

标签: php html css

我一直在努力突出显示当前的页码按钮。 分页工作完美。当您将鼠标悬停在按钮上方时,这些按钮都可以正常显示。但是,我想将当前页码按钮编码为与hover的相同样式:

    <?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;
    }

如果我错误地上传了代码,也真的很抱歉 - 仍然试图解决这个问题。

1 个答案:

答案 0 :(得分:1)

如果我没有错,你只缺少一件事,你必须创建一个活动类来突出显示当前按钮,并且必须在显示按钮的地方添加以下代码。

看看这段代码是否有效

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> "; 
 }