Question

我有一个案例，我必须从服务器中提取数据并在结果中进行分页。有数以千计的数据，我计划每页显示20个项目。

我的计划是每次点击新页面时调用此Laravel功能：

public static function GetPagingListing($limLow=null, $limTop=null) {
    $data = array();
    $results = DB::table('news')->orderBy('date','desc')->limit($limLow, $limTop)->get(array('id','title','category','edituser','date'));

    if($results != null) {
        $i = 0;
        foreach($results as $k=>$v) {
            $data[$i][] = $v;
            $i++;
        }
    }

    $count = DB::table('news')->count(); //this gives total count of the data, for pagination later

    return Response::json(['data'=>$data, 'count'=> ($count/20)]);
}

然后我当前显示分页的方式是这个（Angular中的.html）：

<ul>
                <li ng-class="{disabled: currentPage == 0}">
                    <a href ng-click="prevPage()"><i class="fa fa-angle-double-left"></i>&nbsp;Before</a>
                </li>
                <li ng-repeat="n in range(itemCount)" ng-class="{active: n == currentPage}" ng-click="setPage()">
                    <a href ng-bind="n + 1">1</a>
                </li>
                <li ng-class="{disabled: currentPage == newsList.length - 1}">
                    <a href ng-click="nextPage()">After&nbsp;<i class="fa fa-angle-double-right"></i></a>
                </li>
            </ul>

这一切都运行正常，但我的数据总数是1000+，这就像用户可以点击的50+分页。如何使分页像[<prev][1][2][3][...][21][22][23][...][50][51][52][next>]（或至少是一个逻辑）？

修改

使用Angular UI Bootstrap解决了我的问题：

<pagination total-items="itemCount" page="currentPage" on-select-page="setPage(page)" boundary-links="true" rotate="false" max-size="5"></pagination>

使用其cdn：

<script src="//cdn.jsdelivr.net/angular.bootstrap/0.7.0/ui-bootstrap-tpls.min.js"></script>

Answer 1

我最近刚想到这一点，我的结论是，分页的逻辑令人惊讶地参与其中。您可以寻找灵感的地方是Wordpress的paginate_links函数http://core.trac.wordpress.org/browser/tags/3.7.1/src/wp-includes/general-template.php#L1988。

您需要知道总页数total，当前页面current，要显示的第一页/最后一页的数量end_size（示例中为3）和数字当前页面mid_size周围的页面（在您的示例中为1）;然后：

如果总计＆lt; 2，不需要分页
if current＆gt; 1，显示上一页
表示n从1到总：
- 如果n＆lt; = end_size（第一部分）或n＆gt; total - end_size（最后一部分）或（n＆gt; = current - mid_size和n＆lt; = current + mid_size）（中间部分），显示指向第n页的链接
- 如果没有显示则显示点
如果当前＆lt;总计，显示下一个

如何在AngularJS + Laravel4中处理数百个分页？

1 个答案: