1

I'm using the pagination custom build from here

I don't know how to make the pagination buttons work with my data. Do I have to filter it somehow?

This is where I display my data:

<div  class="col-xs-12 col-md-4 content appear" ng-repeat="post in filterPosts | filter:searchPost | orderBy: sorting.orderBy:sorting.direction | filter : filterPost track by post.id">

After that, This is where the pagination part is:

<div ng-controller="PaginationController" class="col-xs-12" style="height: 50px;">                  
<pagination class="pagination" style="right: 10px; position: absolute; margin: 0px;" total-items="total_items" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>

There is a plunker example for the pagination part, but there's no data involved. Here is the link

Subramanyam M
  • 335
  • 2
  • 6
  • 18
VNVN
  • 58
  • 5

1 Answers1

0

Yes, you need to filter your data. The pagination directive just gives you a way to present to the user the list of possible pages and lets the user easily control the current page. You need to use the page size (defaults to 10) and the current page value to filter the data and display the correct page.

One way to do this is to add an additional filter to help with skipping: 

app.filter('offset', function() {
    return function(input, start) {
        return input.slice(start);
    };
})

and then use this with limitTo to control the paging

<div class="col-xs-12 col-md-4 content appear"
    ng-repeat="post in filterPosts | filter:searchPost
    | orderBy: sorting.orderBy:sorting.direction
    | filter : filterPost track by post.id
    | offset: (bigCurrentPage - 1) * 10
    | limitTo: 10">

Example JSFiddle here

sheilak
  • 5,833
  • 7
  • 34
  • 43
  • Thank you so much for the answer. The Fiddle is awesome. Just one more thing, I'm currently having 2 app: 1) var app = angular.module('app1', ['ngAnimate', 'ui.bootstrap']); With controller1 2) angular.module("ui.bootstrap", ["ui.bootstrap.pagination"]); with controller2 Is it possible to use both controller1 and controller2 on the same html page? If yes, how can I do that? – VNVN Sep 26 '15 at 20:44
  • Yes, but you'll have to manually bootstrap them - see [this link for more info](http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page). Depending on your goal 2 apps might not be the best way to do it. If that link doesn't fully answer your questions I'd suggest creating another question and describe the whole problem. – sheilak Sep 26 '15 at 21:04
  • After using the app.filter part above, I got this errror input.slice is not a function Do I have to include any extra files? Thanks so much for helping – VNVN Sep 26 '15 at 21:13
  • The input needs to be an array. That error will happen if the input is not an array. The output of a filter in ng-repeat should be another array so it should work. Does that help debug it? Have you made some changes to the example code that you could post, the ng-repeat part? – sheilak Sep 26 '15 at 21:21