Implementing a dynamic pagination with UIBootstrap in AngularJS

Question

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?

Zoe - Save the data dump · Accepted Answer · 2019-01-20 11:48:15Z

1

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>

edited Jan 20, 2019 at 11:48

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Sep 9, 2015 at 9:04

shatakshi

1658 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yuro Over a year ago

It is a solution but is there a more effective solution? Because I want to implement the code outside the view. In a Ctrl or better in a filter.

yuro Over a year ago

I've used your solution above. The other view is only a table list.

Collectives™ on Stack Overflow

Implementing a dynamic pagination with UIBootstrap in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related