angularjs - connecting angular bootstrap ui paginate to table

Question

I am working on setting up angular pagination on a table that I am creating.

I have worked through the docs. However, I am not seeing how to connect the pagination to the table. My pagination size is matching the array size. Their are the right number of button links to page the page length. However, my table is still at full length making it impossible for me to test my pagination.

Here is my table body

     <tbody>
                <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
                    <td>[[drink.name]]</td>
                    <td>[[drink.date |date: format :timezone]]</td>
                    <td>[[drink.caffeineLevel]]</td>
                    <td>
                        <a ng-click="delete(drink._id)">
                            <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
                        </a>

                        <a href="" ng-click="update(drink)">
                            <i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
                        </a>
                    </td>
                </tr>
     </tbody>

I have set my table body outside of the table tag I tried it inside but my pagination controls did not appear.

Here is my pagination

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

I also set up a p tag to make sure the tabs are responding

   <div> 
        <p>total Items [[totalItems]]</p>
        <p>itemsPerPage [[itemsPerPage]]</p>
        <p>current page [[currentPage]]</p>
    </div>

The total items, items per page and current page inside of the paragraphare all responding to each click on the pagination controller. However the table is not changing.

Here is my controller

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < data.length; i++) {
          if(data[i].editable) {
            editableArray.push(data[i])
          };
        };
        $scope.currentPage = 1;
        $scope.totalItems = editableArray.length;

        $scope.itemsPerPage =10;
        $scope.maxSize = 3;

        $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
        }
        $scope.pageChanged = function() {
          $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.editableDrinkList = editableArray;
      });
    }; 

When I get it working I will move most of it out into a directive. I just want to get it set up first.

Answer 1

You can do this with a custom filter.

Add a Custom Filter to ngRepeat

You need to be able to tell the repeat which index is going to be the starting point for each page and how many items to include on the page. You can do this by creating a simple filter (I called it pages). This filter is going to use the currentPage and itemsPerPage values that you already set up in your controller.

<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage"> 

Create the Custom Filter

To create a custom filter you pass in your name and then a factory function that returns a worker function. The worker function automatically receives the input array as its first value. The subsequent values are the ones you specified in your filter.

So the pages filter gets the input array and the two values passed to it (currentPage and pageSize). Then you'll just use Array.slice to return the new array to the repeat. Remember, filters are non-destructive. They aren't changing the actual scoped array. They are creating a new array for the repeat to use.

app.filter('pages', function() {
  return function(input, currentPage, pageSize) {
    //check if there is an array to work with so you don't get an error on the first digest
    if(angular.isArray(input)) {
      //arrays are 0-base, so subtract 1 from the currentPage value to calculate the slice start
      var start = (currentPage-1)*pageSize;
      //slice extracts up to, but not including, the element indexed at the end parameter,
      //so just multiply the currentPage by the pageSize to get the end parameter
      var end = currentPage*pageSize;
      return input.slice(start, end);
    }
  };
});

Add the Pagination Directive to the Page

Here's the cleaned up version of the directive you'll add to your html. Don't use an kind of ngClick or ngChange on the pagination directive. ngModel is set to the currentPage variable so there's nothing else you have to do. Since currentPage is two-way bound via ngModel, when it changes the pagination directive will update as well as the pages filter, which will in turn update your repeated table rows.

<pagination  
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage"
    max-size="maxSize">
</pagination>

It's that simple. If you want to see a working demo, check the Plunker.

Plunker