CODEWITHSUNDEEP
javascriptangularjspaginationangular-ui-bootstrap
yuro
yuro

Reputation: 2229

Implementing a dynamic pagination with UIBootstrap in AngularJS

I'm doing a HTTP Request to the server and getting a result from the server or database with the expected data. Well, I don't know how to combine the result with my pagination. For now only the page numbers are correct. But click on a page number doesn't pass the next 10 items.

At first my view:

...
<tr ng-repeat="person in filteredPersons">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.city }}</td>
</tr>
...

<pagination boundary-links="true" 
                    total-items="totalItems" 
                    ng-model="currentPage" 
                    class="pagination-sm" 
                    previous-text="&lsaquo;" 
                    next-text="&rsaquo;" 
                    first-text="&laquo;" 
                    last-text="&raquo;"
                    items-per-page="itemsPerPage">
</pagination>
...

Then the Ctrl with the function:

$scope.currentPage = 1;
$scope.itemsPerPage = 10;

$scope.changeDate = function (datum) {
    CrudService.getByDay(datum).$promise.then(
         function (resp) {
            $scope.persons = resp;
            $scope.pageCount = function () {
                return Math.ceil($scope.persons.length / $scope.itemsPerPage);
            };

            $scope.persons.$promise.then(
                 function () {
                    $scope.totalItems = $scope.persons.length;
                    $scope.$watch('currentPage + itemsPerPage', function () {

                          var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                              end = begin + $scope.itemsPerPage;

                          $scope.filteredPersons = $scope.persons.slice(begin, end);
                    });
                 });
         });
}

Which possibilities do I have? Maybe is it better to outsource the code in a filter?

Upvotes: 0

Views: 3510

Answers (1)

shatakshi
shatakshi

Reputation: 165

Change your Pagination code with the below code :

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

Code for ng-repeat :

<tr ng-repeat="person in persons.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.city }}</td>
</tr>

Upvotes: 1

Related Questions