CakePHP and Angular Pagination

It is actually pretty easy to make your RESTful calls in CakePHP paginateable by using what the Paginator Component already offers us and using Angular UI Bootstrap Paginator on the client-side code. On our server side, we just use the built-in serialization of CakePHP to generate the response. This is an example of a CakePHP controller index() method that is paginateable:

public function index() {
   if (empty($this->request->params['paging'][$this->Table->alias()])) {
      $paging = false;
   } else {
      $paging = $this->request->params['paging'][$this->Table->alias()];
   }
   $query = $this->Table->find();
   $this->set('records', $this->paginate($query));
   $this->set('paging', $paging);
   $this->set('_serialize', ['records', 'paging']);
}

Now let’s fetch the data via a custom Angular JS service in our Angular controller. The service “someApiService” is doing nothing more than a $http.get() call internally and resolving the result and then returning the promise again.

var getData = function(options) {
   someApiService.getData(options).then(function(result) {
      $scope.records = result.records;
      $scope.paging = result.paging;
   });
};

We also need a method to do the page change when one of the pagination links is clicked, so that a new request is done with the “page” param is issued. This is actually the reason we’ve wrapped the API call in a function; we don’t have to duplicate the code. You’ll call getData() one time to load the data when you enter the page and later each time a page button is clicked.

$scope.pageChanged = function () {
   getData({
      params: {
         page: $scope.paging.page
      }
   });
};

In your Angular view:

<uib-pagination 
   items-per-page="paging.perPage"
   total-items="paging.count"
   ng-model="paging.page"
   ng-change="pageChanged()">
</uib-pagination>

That’s all; as you can see, it is pretty easy to get AJAX pagination working with these two awesome frameworks!