Filter a model when there is pagination

Question

My situation right now is that I have a model that loads like 50 car informations. In the view I have a sidebar with some filters like, year, model, mileage, etc.. When I filter those, everything works fine, but, since the model is getting pretty big the client asked for pagination. So instead of loading all cars on one model, I would only load 10 and after I click on a show more button it would load more 10 and append to the model and display it.

The problem is, if I only load the first 10 and I filter, the client wants to filter by all of them. So I figure, there is no way.

The only way I can see is loading all cars in the model and somehow only displaying 10 at a time and when I start filtering it would break this limit and filter all. Is it doable? Any other ideas how to approach this problem?

Answer 1

You won't find the solution in AngularJS.

If the client requested pagination, it is most likely due to performance reasons. Avoiding the problem and implementing pagination except for filtering would not solve the performance issues, not to mention would make the client feel somewhat cheated (I would).

The filtering should be done on the server side which will deliver already filtered results to the client.

Answer 2

You can to filter at server. But, on return JSON, you should to make a small change:

you send:

{ page: 0, itemsByPage: 10, year: 2012, ... }

and on JSON return, informs the total of records, and the paginated records

{ totalRecords: 239, pageItems: [ { id: 28, name: 'ford mustang'}  ... ] }

and then, on promise then, you show "pageItens" and show page buttons based on totalRecords

if you use mysql, you can use found_rows() to get totalRecords on a paginated select:

https://dev.mysql.com/doc/refman/5.0/en/information-functions.html#function_found-rows

Answer 3

I've managed to achieve desire behavior using this: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination