All geek questions in one place

AngularJs pagination combined filtering

In the angular application I'm working on, I'm trying to use composite filtering in combination with pagination. There will be a table with entries x , each row with three columns. I have an input above each column where the user can filter the columns based on the input text. The combination of filters allows you to narrow down the results to better results, but in my case there may still be too much to display on one page, so I'm trying to use pagination.

The body of the table is as follows:

  <tbody> <tr> <td class="col-md-4"> <input type="text" ng-model="nameFilter" class="form-control" placeholder="Name"> </td> <td class="col-md-4"> <input type="text" ng-model="ageFilter" class="form-control" placeholder="Age"> </td> <td class="col-md-4"> <input type="text" ng-model="stateFilter" class="form-control" placeholder="State"> </td> </tr> <tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage"> <td class="col-md-4">{{person.name}}</td> <td class="col-md-4">{{person.age}}</td> <td class="col-md-4">{{person.state}}</td> </tr> </tbody>

The tricky part I encounter is linking the page to the filters used. I saw an example, for example one where the author uses $ watch in a separate search field and can still control pagination. I also saw through research that there is a $watchCollection that you can use, but I'm not sure how to implement it.

 $scope.$watchCollection('[nameFilter, ageFilter, stateFilter]', function(newValues) { //not sure what to do here. console.debug(newValues); $scope.filtered = '';; //really it should equal the now filtered by 3 filters group of people $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.itemsPerPage); });

Are watches the best choice to use in this case? I have this working plunker as an example of what I'm working on, but still need some pagination guidance. One of the questions I have is I'm not sure how to bind to a folder specifically with a list of data. I saw other examples and emulated, but I think filtering can ruin it (not sure)? Any help was appreciated.

+5
source share
1 answer

You do not need to follow the filters. You only need to bind filters to your pagination. That way, angular will handle everything, and you don't need to write extra code in the controller. I updated your plunker and you can see how everything is implemented using angular bindings.

You also have a limitTo filter that handles pagination

 <tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage"> <td class="col-md-4">{{person.name}}</td> <td class="col-md-4">{{person.age}}</td> <td class="col-md-4">{{person.state}}</td> </tr> <ul uib-pagination total-items="(people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter}).length" items-per-page="itemsPerPage" boundary-links="true" ng-model="currentPage"></ul>

https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview

+2
source

Source: https://habr.com/ru/post/1259247/

More articles:


All Articles