Подсчет элементов разбиения на страницы и добавление CSS к нему
Поэтому я нашел хороший класс разбиения на страницы PHP и адаптировал его под свои нужды.
/*********************************************\
* Mini Paginator *
* Made by Wilson Fernandez for multicoders.com*
* [email protected] *
\*********************************************/
Теперь я хочу сделать его отзывчивым и нашел классный способ сделать это здесь -> Адаптивная нумерация страниц с 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.
Предложения, пожалуйста …
Решение
Я предполагаю, что вы сделали с вашим запросом и 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.
Другие решения
Других решений пока нет …