Question

所以我找到了一个很好的PHP分页课程并根据我的需要进行了调整。

/*********************************************\
* Mini Paginator                              *
* Made by Wilson Fernandez for multicoders.com*
* wilsonimport@gmail.com                      *
\*********************************************/

现在我想让它做出响应并在这里找到一个很酷的方法 - ＆gt; Responsive pagination with Kaminari。经过几次尝试后，我注意到，为分页元素添加类并不像它最初看起来那么简单（至少对我而言）。我尝试用PHP做，我用jQuery寻找解决方案，但没有运气。所以我希望在这里有所帮助。：）

原始分页输出为：

<div id = "container">
    <div class = "pagination">
        <a class = "page" href = "/development/paginator/index.php?current_page=5"> Vorherige </a>
        <a class = "page" href = "/development/paginator/index.php?current_page=1">1</a>
        <span class = "dots">...</span>
        <a class = "page" href = "/development/paginator/index.php?current_page=3">3</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=4">4</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=5">5</a>
        <div class = "page active">6</div>
        <a class = "page" href = "/development/paginator/index.php?current_page=7">7</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=8">8</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=9">9</a>
        <span class = "dots">...</span>
        <a class = "page" href = "/development/paginator/index.php?current_page=214">214</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=7"> Nächste </a>
        <form id = "paginationForm" enctype = "multipart/form-data" action = "" method = "get" name = "availPages">
    </div>
</div>

我需要添加类似的类（请注意“away-n”类：

<div id = "container">
    <div class = "pagination">
        <a class = "page" href = "/development/paginator/index.php?current_page=5"> Vorherige </a>
        <a class = "page" href = "/development/paginator/index.php?current_page=1">1</a>
        <span class = "dots">...</span>
        <a class = "page away-3" href = "/development/paginator/index.php?current_page=3">3</a>
        <a class = "page away-2" href = "/development/paginator/index.php?current_page=4">4</a>
        <a class = "page away-1" href = "/development/paginator/index.php?current_page=5">5</a>
        <div class = "page active away-0">6</div>
        <a class = "page away-1" href = "/development/paginator/index.php?current_page=7">7</a>
        <a class = "page away-2" href = "/development/paginator/index.php?current_page=8">8</a>
        <a class = "page away-3" href = "/development/paginator/index.php?current_page=9">9</a>
        <span class = "dots">...</span>
        <a class = "page" href = "/development/paginator/index.php?current_page=214">214</a>
        <a class = "page" href = "/development/paginator/index.php?current_page=7"> Nächste </a>
        <form id = "paginationForm" enctype = "multipart/form-data" action = "" method = "get" name = "availPages">
    </div>
</div>

简而言之，从当前页面类（活动）开始，应该向左（向上）和向右（向下）添加“计数类”直到类“点”，或者如果没有点，则添加到最后一个元素（但不是下一个和前一个，最后一个元素）。

我的问题：如何做到这一点？解决方案首选PHP，但我想用jQuery更容易。建议，请...

Answer 1

我假设您已经在分页布局中完成了Query和CSS。这是一个简单的PHP代码，你可以用里面的变量进行实验。

只需使用新的php文件运行即可学习。

<style type="text/css">
    .pagination {
        display: inline-block;
    }
    .pagination *{
        display: inline-block;
        border: 1px solid #cecece;
        padding: 5px;
    }
    .active{
        background: #dedede;
    }
</style>
<?php

$count_sides_numb = 3;  // count of navigation numbers can you show in beside active page number, you can edit this.
$active_page = (!empty($_GET['current_page']) ? $_GET['current_page']:5);

$count_records = 10000; // total your records database
$recs_in_page = 25;     // total records per page
$count_pages = round($count_records/$recs_in_page,0);

$before_side_numb = $active_page-$count_sides_numb-1;
$after_side_numb = $active_page+$count_sides_numb+1;

// cek for using dot navigation.
$use_dot_btn = true;
if($after_side_numb >= $count_pages ||
    $before_side_numb <= 1) $use_dot_btn = false;

echo "<div id = \"container\">
    <div class = \"pagination\" style=\"display:inline-block;\">";

        echo ($active_page > 1 ? "<a class = \"page\" href = \"/index.php?current_page=".($active_page-1)."\">Vorherige</a>":"<div class=\"page\">Vorherige</div>");
        echo ($before_side_numb+1 > 1 ? "<a class = \"page\" href = \"/index.php?current_page=1\">1</a>":"");
        echo ($use_dot_btn ? "<span class = \"dots\">...</span>":"");

        $first = $before_side_numb+1 < 1 ? 1:$before_side_numb+1;
        for($i=$first; $i<$active_page;$i++){
            echo "<a class = \"page away-$count_sides_numb\" href = \"/index.php?current_page=$i\">$i</a>";
            $count_sides_numb -=1;
        }
        echo "<div class = \"page active away-0\">$active_page</div>";

        $last = $after_side_numb-1 > $count_pages ? $count_pages:$after_side_numb-1;
        for($i=$active_page+1; $i<=$last;$i++){
            echo "<a class = \"page away-$count_sides_numb\" href = \"/index.php?current_page=$i\">$i</a>";
            $count_sides_numb +=1;
        }

        echo ($use_dot_btn ? "<span class = \"dots\">...</span>":"");
        echo $after_side_numb-1 < $count_pages ? "<a class = \"page\" href = \"/index.php?current_page=$count_pages\">$count_pages</a>":"";
        echo $active_page < $count_pages ? "<a class = \"page\" href = \"/index.php?current_page=".($active_page+1)."\">Nächste</a>":"<div class=\"page\">Nächste</div>";

    echo "</div>
</div>";
?>

注意：修复并调整网址导航。

计算分页元素并为其添加CSS

1 个答案: