您正在寻找的显示系统比看起来更复杂,因为如果您有 58 页并且当前页面是 53,您将希望在第 53 页之前而不是之后显示三点按钮,如下所示:
1 2 ... 50 51 52 [53] 54 55 56 57 58
当您当前的页面为 20 时,您会希望它们出现在两侧:
1 2 ... 18 19 [20] 21 22 23 ... 57 58
一般来说,您需要一个输出最大数量的标签/按钮的系统(在您的示例中似乎是 12),同时还计算三点标签。
至少显示当前页面之前的两个页面以及当前页面之后的两个页面将是用户友好的。
您可以编写一个函数来生成遵循以下规则的页码列表,并使用数字 0 表示三点按钮:
// Returns an array of $max_length (or less) page numbers
// where a 0 in the returned array denotes a gap in the series.
// Parameters:
// $tpages: total number of pages
// $page: current page
// $max_length: maximum size of returned array
function getPageList($tpages, $page, $max_length) {
if ($tpages <= $max_length) {
// no breaks in list
return range(1, $tpages);
}
if ($page <= $max_length - 5) {
// no break on left of page
return array_merge(range(1, $max_length-3), array(0, $tpages-1, $tpages));
}
if ($page >= $tpages - $max_length + 6) {
// no break on right of page
return array_merge(array(1, 2, 0), range($tpages - $max_length + 4, $tpages));
}
// breaks on both sides
$size = $max_length - 6;
$first = $page - floor(($size-1)/2);
return array_merge(array(1, 2, 0), range($first, $first + $size - 1),
array(0, $tpages-1, $tpages));
}
如果你像这样调用这个函数:
getPageList(58, 53, 12)
它将返回这个:
[1, 2, 0, 50, 51, 52, 53, 54, 55, 56, 57, 58]
或者像这样,更改当前页码:
getPageList(58, 20, 12)
它将返回这个:
[1, 2, 0, 18, 19, 20, 21, 22, 23, 0, 57, 58]
请注意零,它们是三点按钮的占位符。
现在困难的部分已经完成了。您可以从现有代码中调用该函数,而无需进行太多更改。而不是你的for
循环,你将使用foreach
关于上述函数的输出。在循环中,您将对零进行额外的测试,因此您可以输出三点标签:
$output = "";
// first part of your code for getting $tpages and
// generating prev/next buttons comes here: it does not change
// ...
//
$output .= '<div class="fpagination fpagination-centered"><ul>';
foreach (getPageList($tpages, $page, 12) as $i)
{
if ($i == $page)
{
$output .= '<li class="active"><a href="/articles/' . $seo . '&p=' . $i .
'#comments" ng-click="progress()" class="goToTop">' .
$i . '</a></li>';
}
else if ($i == 0)
{
$output .= '<li>…</li>';
}
else
{
$output .= '<li><a href="/articles/' . $seo . '&p=' . $i . '#comments"
ng-click="progress()" class="goToTop">' . $i . '</a></li>';
}
}
$output .= '</ul></div>';
echo $output;
请注意,最后一个参数获取页面列表函数为 12。您可以根据需要配置此数字。这取决于您希望输出的宽度。