Databases
StackOverflow2013
Postsdbo
POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
    primarykey
    data
    text
    <p><strong><em>Edit:</em></strong></p> <p>I need a pagination in my Laravel 4 - Angular JS application which is structured using twitter bootstrap 3. You may suggest the <a href="https://github.com/angular-ui/bootstrap/tree/master/src/pagination" rel="nofollow noreferrer">angularui-bootstrap pagination</a>. But I am not planning to use this right now. I need to explore and utilize the features of Laravel pagination with angular.js. I have seen one blog <a href="http://kirkbushell.me/pagination-with-laravel-4-and-angular-js/" rel="nofollow noreferrer">article here</a> which describe the same. But my bad luck, it is not working and there is a lot of mistakes in the article.</p> <p>So based on that article, I have a Laravel controller function which uses <a href="http://laravel.com/docs/pagination" rel="nofollow noreferrer">pagination</a> like this, Please not that, I am converting my return data to array using <code>toArray()</code>.</p> <pre><code>class CareerController extends BaseController { public function index() { $careers = Career::paginate( $limit = 10 ); return Response::json(array( 'status' =&gt; 'success', 'message' =&gt; 'Careers successfully loaded!', 'careers' =&gt; $careers-&gt;toArray()), 200 ); } } </code></pre> <p>Now see how it is loaded the data in my Firebug console using angularjs REST http <code>$resource</code> call,</p> <p><img src="https://i.stack.imgur.com/Hcu5Z.png" alt="firebug console"></p> <p>Here I have some pagination details such as <code>total</code>, <code>per_page</code>, <code>current_page</code>, <code>last_page</code>, <code>from</code> and <code>to</code> including my <code>data</code>.</p> <p>And now look what I am doing in angular script,</p> <pre><code>var app = angular.module('myApp', ['ngResource']); // Module for the app // Set root url to use along the scripts app.factory('Data', function(){ return { rootUrl: "&lt;?php echo Request::root(); ?&gt;/" }; }); // $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 = []; }); }; } </code></pre> <p>And my view,</p> <pre><code>&lt;div class="col-xs-8 col-sm-9 col-md-9" ng-controller="CareerCtrl" data-ng-init="init()"&gt; &lt;table class="table table-bordered"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="4"&gt;S.No&lt;/th&gt; &lt;th&gt;Job ID&lt;/th&gt; &lt;th&gt;Title&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat="career in careers"&gt; &lt;td style="text-align:center"&gt;{{ $index+1 }}&lt;/td&gt; &lt;td&gt;{{ career.job_id }}&lt;/td&gt; &lt;td&gt;{{ career.job_title }}&lt;/td&gt; &lt;/tr&gt; &lt;tr ng-show="careers.length == 0"&gt; &lt;td colspan="3" style="text-align:center"&gt; No Records Found..!&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div paginate="allCareers"&gt;&lt;/div&gt; &lt;/div&gt;&lt;!--/row--&gt; </code></pre> <p>And the paginate directive,</p> <pre><code>app.directive( 'paginate', [ function() { return { scope: { results: '=paginate' }, template: '&lt;ul class="pagination" ng-show="totalPages &gt; 1"&gt;' + ' &lt;li&gt;&lt;a ng-click="firstPage()"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;' + ' &lt;li&gt;&lt;a ng-click="prevPage()"&gt;&amp;lsaquo;&lt;/a&gt;&lt;/li&gt;' + ' &lt;li ng-repeat="n in pages"&gt;' + ' &lt;a ng-bind="n" ng-click="setPage(n)"&gt;1&lt;/a&gt;' + ' &lt;/li&gt;' + ' &lt;li&gt;&lt;a ng-click="nextPage()"&gt;&amp;rsaquo;&lt;/a&gt;&lt;/li&gt;' + ' &lt;li&gt;&lt;a ng-click="last_page()"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;' + '&lt;/ul&gt;', 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 &lt;= scope.totalPages; i++ ) { scope.pages.push( i ); } scope.nextPage = function() { if ( scope.current_page &lt; scope.totalPages ) { scope.current_page++; } }; scope.prevPage = function() { if ( scope.current_page &gt; 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 ); } } }]); </code></pre> <p>Now I am getting maximum 10 records in my html table, the pagination links are not working.</p> <p>Console shows <code>Error: results is undefined</code> with the pagination directive.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdevo
    1. USdevo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. USdevo
      1. VTFavorite
    2. VO
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. USAntonio Frignani
      1. VTFavorite
    3. VO
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. USdevo
      1. VTBountyStart
    1. COA plunker or fiddle would be really helpful.
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. UShugo der hungrige
    2. COTry to initialize `careers` property at the beginning of the `CareerCtrl`: `function CareerCtrl($scope, $http, Data, Career) { $scope.careers = []; ...`
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. USAlexei
    3. COCan you make your http://azureits.com/cms/api/v1/careers/ return Content Type of "application/json"?
      singulars
      1. POLaravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
      1. USmarcoseu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload