CODEWITHSUNDEEP
jqueryangularjspaginationangular-ui-bootstrap
heb-NR
heb-NR

Reputation: 327

uib-pagination NOT working Angularjs

EDIT!

added more code snippets and plunker updated (AGAIN)

Still pretty new to Angular and coding in general.

I've tried and tried to instantiate the UI Pagination from the Angular Directives website. I've scoured Stack Overflow and codeProject and various other sites. I can not for the life of me get my pagination to work.

I don't know what else to try. I'm pretty sure I've called enough properties

<uib-pagination
    items-per-page="itemsPerPage"
    ng-model="currentPage"
    max-size="maxSize"
    class="pagination-sm"
    next-text="&raquo;"
    previous-text="&laquo;"
    boundary-links="false" >
</uib-pagination>

and running the controller:

app.controller('PaginationControl',function ($scope,  $window) {
    // Pagination variables
    $scope.totalItems = 100; //this needs to be changed to represent the total of filtered parks after a search is done and NOT a static number.
    $scope.currentPage = 1;
    $scope.maxSize = 8;
    $scope.itemsPerPage = 10;

});

What I don't understand is how to change the pagination properties from static numbers hard coded in the controller to dynamic numbers based off the results of my search.

Here's a Plunker which has everything but the pagination working.

Much obliged

Upvotes: 1

Views: 9203

Answers (1)

Rob J
Rob J

Reputation: 6629

There were a couple of problems with your plunk. You referenced the bootstrap.js files instead of the bootstrap.css file. You referenced the angular core library for version 1.4.5 and the angular animate library for version 1.4.7. You reference jQueryUI but not jQuery. You did not set the total-items attribute on the pagination directive. Here is an updated plunk with the pagination displaying. Updated reference block:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>

Upvotes: 2

Related Questions