Edit:
I need pagination in my Laravel 4 - Angular application, which is structured using twitter boot buffer 3. You can suggest angularui-bootstrap pagination . But I do not plan to use it right now. I need to learn and use the Laravel page pagination features with angular.js. I saw one blog article here that describe the same thing. But my failure, it does not work, and there are a lot of mistakes in this article.
So, based on this article, I have a Laravel controller function that uses pagination , like this, please, not that I convert my returned data into an array using 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 ); } }
Now let's see how it loads data in my Firebug console using a GUID call using angularjs,
Here I have some pagination options, such as total , per_page , current_page , last_page , from and to , including my data .
And now look what I'm doing in an Angular script,
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 = []; }); }; }
And my opinion
<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 width="4">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>
And the paginate directive,
app.directive( 'paginate', [ function() { return { scope: { results: '=paginate' }, template: '<ul class="pagination" ng-show="totalPages > 1">' + ' <li><a ng-click="firstPage()">«</a></li>' + ' <li><a ng-click="prevPage()">‹</a></li>' + ' <li ng-repeat="n in pages">' + ' <a ng-bind="n" ng-click="setPage(n)">1</a>' + ' </li>' + ' <li><a ng-click="nextPage()">›</a></li>' + ' <li><a ng-click="last_page()">»</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 ); } } }]);
Now I get a maximum of 10 entries in my html table, page links do not work.
The console displays Error: results is undefined using the pagination directive.