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

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）；那么：

• 如果总数
• 如果 current > 1，显示 prev
• 对于从 1 到总计的 n：
  • 如果 n total - end_size（最后一部分）或 (n >= current - mid_size and n
  • 如果不显示则显示点
• 如果当前