简体   繁体   中英

angular-js ng-paginate with filter

So I am using ng-paginate for pagination, but there is a slight problem when I use the filter. So I have a dropdown with 3 options.

so when I choose an option from the dropdown the data is filtered but only the data of the page. Example I have 100 records and I am showing 10 records each page only the data from the 10 records are filtered. So I am looking for a solution where the filter should work for all the records, not only from the current page. here is the code its in jade.

<label for="exampleSelect1">Vehicle-Mode
  <select id="exampleSelect1" name="opt" value="opt" ng-model="check" ng-change="getValue(check, fromDate, toDate)" class="form-control">
    <option>Booked</option>
    <option>checked_in</option>
  </select>
</label>
<tr dir-paginate="vehicle in vehicles | filter:search | itemsPerPage:1000">
  <td>{{xxx}}</td>
  <td>{{yyy}}</td>
</tr>
<dir-pagination-controls max-size="1000" direction-links="true" boundary-links="true"></dir-pagination-controls>

So the solution was in their documentation Frequently Asked Questions

Why does my sort / filter only affect the current page?

This is a common problem and is usually due to the itemsPerPage filter not being at the end of the expression. For example, consider the following:

<li dir-paginate="item in collection | itemsPerPage: 10 | filter: q">...</li> <!-- BAD -->

In this case, the collection is first truncated to 10 items by the itemsPerPage filter, and then those 10 items only are filtered. The solution is to ensure the itemsPerPage filter comes after any sorting / filtering:

<li dir-paginate="item in collection | filter: q | itemsPerPage: 10">...</li> <!-- GOOD -->

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM