In need of assistance with a code that retrieves employees from a controller and applies pagination while filtering records. The issue arises when attempting to filter from a page other than the first, as it does not display any filtered results.
The code in question is as follows:
-filter.js
angular.module('MyApp', ['ui.bootstrap']).controller('MyController', function ($scope, EmployeesService) {
$scope.Employees = null;
$scope.currentPage = 1;
$scope.pageSize = 2;
$scope.maxSize = 100;
EmployeesService.GetEmployees().then(function (d) {
$scope.Employees = d.data; // Success
}, function () {
alert('Failed'); // Failed
})
})
.service('EmployeesService', function ($http) {
var service = {};
service.GetEmployees = function () {
return $http.get('/Employees/GetEmployees');
}
return service;
})
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
-Index.cshtml
<div ng-app="MyApp">
<div ng-controller="MyController">
<input type="text" ng-model="filterText" name="searchString" placeholder="Search for names.." class="form-control"><br />
<div ng-repeat="emp in Employees |orderBy: 'employeeName'| filter: filterText | start: (currentPage-1) * pageSize | limitTo: pageSize"
class="alert alert-warning col-md-12">
<span ng-bind="emp.employeeName"></span> <b>:</b>
<span ng-bind="emp.employeePhoneNumber"></span>
</div>
<pagination ng-model="currentPage" total-items="Employees.length" items-per-page="pageSize"></pagination>
</div>
</div>
Your help is greatly appreciated.
Apologies for the delay. Here is the functioning JSFiddle: