我如何回应三个点" ..."在特定数字(例如9)之后并且在三个点之后回显最后两个数字" ..." (例如,57和58)使用MySQLi和PHP进行分页?
以下是代码:
<?php
$output = "";
$tpages = ceil($engine->numrows("SELECT null FROM `cms_articles_comments` WHERE `article_id` = '" . $id . "'") / 10);
if ($page == 1)
{
$output .= '<button type="button" class="btn btn-info pull-left goToTop" disabled><i class="fa fa-arrow-left"></i> Previous</button>';
}
else
{
$output .= '<a href="/articles/' . $seo . '&p=' . ($page - 1) . '#comments" ng-click="progress()" class="btn btn-info pull-left goToTop"><i class="fa fa-arrow-left"></i> Previous</a>';
}
if ($page >= $tpages)
{
$output .= '<button type="button" class="btn btn-info pull-right goToTop" disabled>Next <i class="fa fa-arrow-right"></i></button>';
}
else
{
$output .= '<a href="/articles/' . $seo . '&p=' . ($page + 1) . '#comments" ng-click="progress()" class="btn btn-info pull-right goToTop">Next <i class="fa fa-arrow-right"></i></a>';
}
$output .= '<div class="fpagination fpagination-centered"><ul>';
for($i = 1; $i <= $tpages; $i++)
{
if ($i == $page)
{
$output .= '<li class="active"><a href="/articles/' . $seo . '&p=' . $i . '#comments" ng-click="progress()" class="goToTop">' . $i . '</a></li>';
}
else
{
$output .= '<li><a href="/articles/' . $seo . '&p=' . $i . '#comments" ng-click="progress()" class="goToTop">' . $i . '</a></li>';
}
}
$output .= '</ul></div>';
echo $output;
?>
使用上面提供的代码,我得到了这个:
我希望分页列表显示如下:
prntscr.com/a0azua, prntscr.com/a0ay1s
提前致谢。
答案 0 :(得分:3)
您正在寻找的显示系统比看起来更复杂,因为如果您有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;
请注意, getPageList 功能的最后一个参数是12.您可以根据需要配置此编号。这取决于您希望输出的宽度。
答案 1 :(得分:0)
$bOutputOnce = FALSE;
for($i = 1; $i <= $tpages; $i++) {
if ($i == $page) {
$output .= '<li class="active"><a href="/articles/' . $seo . '&p=' . $i . '#comments" ng-click="progress()" class="goToTop">' . $i . '</a></li>';
} elseif (($i <= 9) or ($i >= ($tpages - 2))) {
$output .= '<li><a href="/articles/' . $seo . '&p=' . $i . '#comments" ng-click="progress()" class="goToTop">' . $i . '</a></li>';
} elseif ($bOutputOnce == FALSE) {
$output .= '<li>…</li>';
$bOutputOnce = TRUE;
}
}
但同样,最好使用框架。此外,如果您的页面少于9页,则会产生问题,您需要为此添加更多if / else代码。事实上,如果你有11个页面,那将会很奇怪,因为它将是9 ... 10 11,这没有任何意义。