如何回显"..."在数字9之后,并在"..."之后回显最后两个数字.分页? [英] How to echo "..." after number 9 and echo the last two numbers after "..." for pagination?

查看:52
本文介绍了如何回显"..."在数字9之后,并在"..."之后回显最后两个数字.分页?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我如何在特定数字(例如9)之后回显三个点"...",并在三个点"..."(例如57和58)后回显最后两个数字,以便使用MySQLi分页和PHP?

How do I echo the three dots "..." after a specific number (e.g., 9) and echo the last two numbers after the three dots "..." (e.g., 57 and 58) for pagination using MySQLi and 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;

    ?>

使用上面提供的代码,我得到了:

With the code provided above, I get this:

我希望分页列表显示如下:

I want the pagination list to show like this:

prntscr.com/a0azua, prntscr.com/a0ay1s

prntscr.com/a0azua, prntscr.com/a0ay1s

谢谢.

推荐答案

您正在寻找的显示系统比看起来要复杂,因为如果您有58个页面,而当前页面是53个,则需要显示在第53页之前而不是之后的那个三点按钮,就像这样:

The display system you are looking for is more complex than it seems, because if you have 58 pages and your current page is 53, you'll want to show that three-dot button before page 53 and not after, like this:

1 2 ... 50 51 52 [53] 54 55 56 57 58

当当前页面为20时,您希望它们同时出现在两侧:

And when your current page is 20, you'll want them to appear on both sides:

1 2 ... 18 19 [20] 21 22 23 ... 57 58

通常,您希望使用一种系统,该系统可以输出最多标签/按钮数(在您的示例中为12),同时还要计算三点标签.

In general, you want a system whereby a maximum number of labels/buttons is output (it seems to be 12 in your example), also counting the three-dot labels.

用户友好的做法是至少显示当前页面之前的两个页面,以及当前页面之后的两个页面.

It would be user-friendly to show at least the two pages preceding the current page, and the two following it.

您可以编写一个函数来生成遵循这些规则的页码列表,并使用数字0表示三点按钮:

You could write a function to generate a list of page numbers that follow these rules, and use the number 0 to denote the three-dot button:

// 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));
}

如果您这样调用此函数:

If you call this function like this:

getPageList(58, 53, 12)

它将返回以下内容:

[1, 2, 0, 50, 51, 52, 53, 54, 55, 56, 57, 58]

或者像这样,更改当前页码:

Or like this, changing the current page number:

getPageList(58, 20, 12)

它将返回以下内容:

[1, 2, 0, 18, 19, 20, 21, 22, 23, 0, 57, 58]

请注意零,它们是三点按钮的占位符.

Notice the zeroes, which are the place holders for the three-dot buttons.

现在困难的部分已经完成.您可以从现有代码中调用该函数,而无需进行太多更改.代替您的for循环,您将在上述函数的输出上使用foreach.在循环中,您将对零进行额外的测试,因此您可以输出三点标签:

Now the difficult part has been done. You can call that function from your existing code without having to change much. Instead of your for loop, you'll use a foreach on the output of the above function. In the loop you'll have an extra test on the zero, so you can output the three-dot label:

$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>&hellip;</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.您可以根据需要配置此数字.这取决于您希望输出的宽度.

Notice that the last argument to the getPageList function is 12. You can configure this number to your needs. It depends on how wide you want your output to become.

这篇关于如何回显"..."在数字9之后,并在"..."之后回显最后两个数字.分页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆