Laravel 4 和 Angular JS 和 Twitter Bootstrap 3 分页

Posted 2023-03-14

【中文标题】Laravel 4 和 Angular JS 和 Twitter Bootstrap 3 分页

【英文标题】：Laravel 4 and Angular JS and Twitter Bootstrap 3 Pagination

【发布时间】：2013-11-18 00:17:42

【问题描述】：

编辑：

我需要在我的 Laravel 4 - Angular JS 应用程序中进行分页，该应用程序使用 twitter bootstrap 3 构建。你可以建议 angularui-bootstrap pagination。但我现在不打算使用它。我需要用 angular.js 探索和利用 Laravel 分页的特性。我看过一篇博客article here 描述了相同的内容。但是我运气不好，它不起作用，并且文章中有很多错误。

所以根据那篇文章，我有一个 Laravel 控制器函数，它像这样使用 pagination，请不要这样，我正在使用 toArray() 将返回数据转换为数组。

class CareerController extends BaseController 
    public function index() 
        $careers = Career::paginate( $limit = 10 );
        return Response::json(array(
            'status'  => 'success',
            'message' => 'Careers successfully loaded!',
            'careers' => $careers->toArray()),
            200
        );
    

现在看看它是如何使用 angularjs REST http $resource 调用在我的 Firebug 控制台中加载数据的，

这里有一些分页细节，例如total、per_page、current_page、last_page、from 和to，包括我的data。

现在看看我在 Angular 脚本中做了什么，

var app = angular.module('myApp', ['ngResource']); // Module for the app
// Set root url to use along the scripts
app.factory('Data', function()
    return 
        rootUrl: "<?php echo Request::root(); ?>/"
    ;
);
// $resource for the career controller
app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) 
   return $resource( Data.rootUrl + 'api/v1/careers/:id',  id: '@id', 
    query: 
        isArray: false,
        method: 'GET'
    
   );
]);
// the career controller
function CareerCtrl($scope, $http, Data, Career) 
    // load careers at start
    $scope.init = function () 

        Career.query(function(response)    
            $scope.careers = response.careers.data;  
            $scope.allCareers = response.careers; 

        , function(error) 

            console.log(error);

            $scope.careers = [];
        ); 

    ;

我的观点，

<div class="col-xs-8 col-sm-9 col-md-9" ng-controller="CareerCtrl" data-ng-init="init()">      
        <table class="table table-bordered">
          <thead>
              <tr>
                  <th >S.No</th>
                  <th>Job ID</th>
                  <th>Title</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="career in careers">
                  <td style="text-align:center"> $index+1 </td>
                  <td> career.job_id </td>
                  <td> career.job_title </td>
              </tr>
              <tr ng-show="careers.length == 0">
                  <td colspan="3" style="text-align:center"> No Records Found..!</td>
              </tr>
          </tbody>
        </table>
        <div paginate="allCareers"></div>
</div><!--/row-->

还有分页指令，

app.directive( 'paginate', [ function() 
    return 
      scope:  results: '=paginate' ,
      template: '<ul class="pagination" ng-show="totalPages > 1">' +
               '  <li><a ng-click="firstPage()">&laquo;</a></li>' +
               '  <li><a ng-click="prevPage()">&lsaquo;</a></li>' +
               '  <li ng-repeat="n in pages">' +
               '    <a ng-bind="n" ng-click="setPage(n)">1</a>' +
               '  </li>' +
               '  <li><a ng-click="nextPage()">&rsaquo;</a></li>' +
               '  <li><a ng-click="last_page()">&raquo;</a></li>' +
               '</ul>',
      link: function( scope ) 
       var paginate = function( results ) 
         if ( !scope.current_page ) scope.current_page = 0;

         scope.total = results.total;
         scope.totalPages = results.last_page;
         scope.pages = [];

         for ( var i = 1; i <= scope.totalPages; i++ ) 
           scope.pages.push( i ); 
         

         scope.nextPage = function() 
           if ( scope.current_page < scope.totalPages ) 
             scope.current_page++;
           
         ;

         scope.prevPage = function() 
           if ( scope.current_page > 1 ) 
             scope.current_page--;
           
         ;

         scope.firstPage = function() 
           scope.current_page = 1;
         ;

         scope.last_page = function() 
           scope.current_page = scope.totalPages;
         ;

         scope.setPage = function(page) 
           scope.current_page = page;
         ;
       ;

       var pageChange = function( newPage, last_page ) 
         if ( newPage != last_page ) 
           scope.$emit( 'page.changed', newPage );
         
       ;

       scope.$watch( 'results', paginate );
       scope.$watch( 'current_page', pageChange );
     
   
 ]);

现在我的 html 表中最多有 10 条记录，分页链接不起作用。

控制台显示带有分页指令的Error: results is undefined。

【问题讨论】：

一个 plunker 或 fiddle 会很有帮助。

尝试在CareerCtrl开头初始化careers属性：function CareerCtrl($scope, $http, Data, Career) $scope.careers = []; ...

你能让你的azureits.com/cms/api/v1/careers返回“application/json”的内容类型吗？

@marcoseu 在我的控制器中看到，我正在使用 laravel 的 json 响应 return Response::json(array( 'status' => 'success', 'message' => 'Careers successfully loaded!', 'careers' => $careers->toArray()), 200 );。文档laravel.com/docs/responses#special-responses

检查jsfiddle.net/alexeime/Rd8MG/6。由于同源政策，获取职业信息时出错。在你的机器上试试代码。

【参考方案1】：

我为您的案例准备了一个工作示例http://jsfiddle.net/alexeime/Rd8MG/101/ 更改 Career 服务以使您的代码正常工作。 希望这会对您有所帮助编辑： 编辑 jsfiddle 索引号为http://jsfiddle.net/alexeime/Rd8MG/106/

【讨论】：

你能在第二页添加一些代码来继续序列号吗？我需要 11 and 12 而不是第 2 页中的 1 and 2。

它显示相同..1 and 2。我们在 laravel 输出中有 from 变量对吗？

你看到老小提琴了吗？在小提琴jsfiddle.net/alexeime/Rd8MG/106 第 1 页从序列号 1 开始，第 2 页 - 有 11，第 33 页 - 有 21

小提琴是否解决了问题的主要问题 - 分页问题？分页有效吗？

@Alexi 当我在 jsfiddle 中运行代码时它不起作用，可能是一些跨域问题。但是分页在我的服务器上工作。

【参考方案2】：

你的职业生涯并没有与结果挂钩。做吧： paginate="careers" 代替。但是，我确实意识到我的原始文章中也存在一个错误——那就是在你的分页指令中，它定义了范围——它应该如下所示：

scope:  results: '=paginate' ,

这是在告诉我们的指令将“结果”绑定到 $scope 对象，如下所示：

$scope.results

然后这将绑定到结果集（在本例中为职业）并将其用作分页工作的基础。

希望有帮助！

【讨论】：

您的意思是将scope: results: '&' 替换为scope: results: '&paginate' ？

是的，这就是我的意思。检查我更新的回复，它也应该是 =paginate，而不是 &paginate 根据我的原始回复（抱歉造成混淆）。主要问题是您没有将结果集传递给分页，它用于查看来自 laravel 的分页对象响应的属性，并创建所有链接/navigation.etc。

现在我得到Error: results is undefined... 在指令的这行代码scope.totalPages = results.last_page; 上。

请不要记下我的回答——我的回答是正确的。这是我文章中的原始代码不正确（需要更新）。此外，实际上是您的代码不正确并且需要更新（在此特定情况下）。除非提供所有代码，否则我无法帮助您。根据我的原始评论，请按照我的原始回复使用 &paginate 行更新您的代码。

如果答案不能解决问题，您不会对某人投反对票。如果您是 Angular 的新手，那么@iDevoc 似乎您已经不知所措了。