castellbot castellbot - 6 months ago 47
Javascript Question

Angular pagination don't sort and filter on all pages

I'm using angular 1.5.5 and angular-bootstrap 1.3.3 to paginate, sort and filter my data on a table via ng-repeat, but it is only sorting and filtering on the current page and not on all the pages.

app.js

var app = angular.module("sac.app", ['ngResource', 'ui.router', 'ui.bootstrap']);
app.config(function config($stateProvider, $urlRouterProvider) {
'use strict';
$urlRouterProvider.otherwise('/home');

$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html'
})
.state('patients', {
url: '/patients',
controller: 'PatientController',
templateUrl: 'views/patients.html'
});

app.controller('PatientController', ['$scope', 'patients', function ($scope, patients) {
patients.success(function (data) {
$scope.patients = data;
$scope.sortType = 'name';
$scope.sortReverse = true;
$scope.search = '';
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.totalItems = $scope.patients.length;
$scope.maxSize = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.patients.indexOf(value);
return (begin <= index && index < end);
};
})
}]);

app.factory('patients', ['$http', function ($http) {
return $http.get('api/patients')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);


patients.html

<form>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Ingrese el Nombre o Apellido del Paciente" ng-model="search" autofocus>
<div class="input-group-btn">
<a ui-sref="patient.create" class="btn btn-primary"><i class="fa fa-plus"></i> Nuevo Paciente</a>
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Nombre Completo
<span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'identity'; sortReverse = !sortReverse">
Identificación
<span ng-show="sortType == 'identity'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse">
Edad
<span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'telephone'; sortReverse = !sortReverse">
Teléfono
<span ng-show="sortType == 'telephone'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'email'; sortReverse = !sortReverse">
Email
<span ng-show="sortType == 'email'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients | orderBy:sortType:sortReverse | filter:paginate | filter:search">
<td>{{ patient.name }} {{ patient.last_name }}</td>
<td>{{ patient.identity }}</td>
<td>{{ patient.age }}</td>
<td>{{ patient.telephone }}</td>
<td>{{ patient.email }}</td>
</tr>
</tbody>
</table>
<uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

Answer

I found this solution:

app.js

$scope.patients = data;
$scope.sortType     = 'name'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order
$scope.search   = '';         // set the default search/filter term
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.totalItems = $scope.patients.length;
$scope.maxSize = 5;
$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
    end = begin + $scope.itemsPerPage;
    index = $scope.patients.indexOf(value);
    return (begin <= index && index < end);
};
$scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
};
$scope.$watch('currentPage + itemsPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;

    $scope.filteredFriends = $scope.patients.slice(begin, end);
});

$scope.noOfPages = Math.ceil($scope.totalItems / $scope.itemsPerPage);

$scope.$watch('search', function (newVal, oldVal) {
    $scope.filtered = filterFilter($scope.patients, newVal);
    $scope.totalItems = $scope.filtered.length;
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.itemsPerPage);
    $scope.currentPage = 1;
}, true);

patients.html

<tr ng-repeat="patient in filtered = patients | orderBy:sortType:sortReverse | filter:search | startFrom:(currentPage-1)*itemsPerPage | limitTo:itemsPerPage">
    <td>{{ patient.name }} {{ patient.last_name }}</td>
    <td>{{ patient.identity }}</td>
    <td>{{ patient.age }}</td>
    <td>{{ patient.telephone }}</td>
    <td>{{ patient.email }}</td>
</tr>
<uib-pagination first-text="&lt;&lt;" last-text="&gt;&gt;" next-text="&gt;" previous-text="&lt;"
                                    total-items="totalItems" items-per-page="itemsPerPage" max-size="noOfPages"
                                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
Comments