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

Question

所以我找到了一个不错的 PHP 分页 class 并根据我的需要对其进行了调整。

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

现在我想让它响应并在这里找到了一个很酷的方法 -> Responsive pagination with Kaminari。几次尝试后我注意到，向分页元素添加 classes 并不像乍看起来那么简单（至少对我而言）。我尝试在 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>

我需要像那样添加 classes（注意 "away-n" classes:

<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>

简而言之，从当前页面class（活动）开始，应该在左侧（上）和右侧（下）添加一个"counting class"，直到class "dots" 或者，如果没有点，则到最后一个元素（但不是下一个和上一个，最后一个元素）。

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

Answer 1

我假设您已经完成了分页布局中的查询和 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>";
?>

注意：修复和调整 url 导航。

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

Counting pagination elements and add CSS to it

php

jquery

pagination

counting