Avatar of eugene007
eugene007

asked on 

Laravel Pagination + AngularJS

Employee.php

			<tbody>
				<tr ng-repeat="person in employee | orderBy:orderByField:reverseSort">
					<td>{{person.name}}</td>
					<td>{{person.age}}</td>
					<td>{{person.gender}}</td>
					<td>{{person.company}}</td>
					<td>
						 <div class="btn-toolbar" role="toolbar">
							<button class="btn" ng-click="viewEmployee(person.id)"><span class="glyphicon glyphicon-eye-open"></button> 
							<button class="btn" ng-click="editEmployee(person.id)"><span class="glyphicon glyphicon-pencil"></button> 
							<button class="btn" ng-click="deleteEmployee(person.id)"><span class="glyphicon glyphicon-trash"></button>
						 </div>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>  
                    <td align="center" colspan="6">  
                        <div class="pull-right">  
                             <pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></pagination>  
                             <a class="btn btn-primary">Page: {{pageIndex}} / {{numPages}}</a>  
                        </div>  
                     </td>  
                </tr>  
			</tfoot>

Open in new window



EmployeeController.php

	scope.maxSize = 5;
	scope.totalCount = 0;
	scope.pageIndex = 1;
	scope.pageSizeSelected = 5;

        scope.init = function(){
              $http({
			method: 'GET',
			url: "/api/v1/employee/list?pageIndex=" + scope.pageIndex + "&pageSize=" + scope.pageSizeSelected
              }).then(function successCallback(response){
			scope.totalCount = response.data.length; 
                        scope.numPages =  Math.ceil(scope.totalCount / scope.pageSizeSelected);			
		        scope.employee = response.data;
              });
        };

       scope.pageChanged = function(){
		scope.init();
	};

Open in new window


How do I handle pageIndex in laravel? Apart from that I am receiving an error: [orderBy:notarray] when returning in the following manner:

  public function lsAll(){
        $employee = Employee::paginate(5);
	return $employee; 
  }

Open in new window

LaravelBootstrapAngularMySQL ServerPHP

Avatar of undefined
Last Comment
eugene007
Avatar of Banshi lal dangi
Banshi lal dangi
Flag of India image

For the error, you are seeing. That is because of the wrong "orderBy:orderByField:reverseSort" clauses. I think it should be "orderBy:<field-name>".
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

How do I handle pageIndex in laravel?
Can you elaborate on this a bit more - not clear what you are asking?
Avatar of eugene007
eugene007

ASKER

I am attempting to do pagination. This line of code represents the number of records to be displayed in each page.

 
$employee = Employee::paginate(5);   //pageSizeSelected

Open in new window

 

Now to scroll from page to page (pageIndex) how is that done?
Avatar of eugene007
eugene007

ASKER

If I do "orderBy:<field-name>" then I won't be able to perform sorting (ASC | DESC).
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

This is just a guess, but I think the Laravel side of things would not do the pagination.  Instead it would return a JSON string to AngularJS, and let AngularJS behave like a Single-Page Application.
Avatar of eugene007
eugene007

ASKER

I am trying to do angularjs database pagination as I anticipate in future I may have a million record. Performance could be an issue.
ASKER CERTIFIED SOLUTION
Avatar of eugene007
eugene007

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
SOLUTION
Avatar of eugene007
eugene007

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Interesting.  I would have thought Paginator would be a static (helper) thing, and wouldn't require an instance, since you give it all of the information it needs in the method call or the constructor.  Oh well...  Glad you found a good solution!
Avatar of eugene007
eugene007

ASKER

Now I am trying to get this to work as it is not appearing.

<tfoot>
				<tr>  
                    <td align="center" colspan="6">  
                        <div class="pull-right">  
                             <pagination 
								total-items="totalCount" 
								ng-change="pageChanged()" 
								items-per-page="pageSizeSelected" 
								direction-links="true" 
								ng-model="pageIndex" 
								max-size="maxSize" 
								class="pagination-sm" 
								boundary-links="true" 
								rotate="false" 
								num-pages="numPages">
							</pagination>  
                            <a class="btn btn-primary">Page: {{pageIndex}} / {{numPages}}</a>  
                        </div>  
                     </td>  
                </tr>  
			</tfoot>

Open in new window

SOLUTION
Avatar of eugene007
eugene007

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of eugene007
eugene007

ASKER

As provided.
PHP
PHP

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

125K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo