Data filtering with pagination and Vue.js

Hmm... Great support :D I figure it out by myself :|

Short answer is you can't.

Longer answer: you get your pagimated collection, which includes URLs and meta data for pagination. That part should be simple enough.

Filtering your going to have to set up post request to a 'like' search query or use a third party service to cache your data. Either way you'll still have to fire off requests. unless you want to load a 7,000 in one shot.

Good luck and sorry no one asked how high when you said jump :)

Use regular pagination, just skip vue altogether for this.

jekinney great answer, this is a very similar to what I have done.

jlrdw no, I could't do it. Vue or better say AJAX was must in this projects. It was crucial demand for beter user experince.

I have set all the endpoints to return JSON. I grab paginated results and iterate them with v-for. For searching functionality I set up another endpoint where I pass search query. I have an input text where I listen on keyup and triger method to send HTTP request. Returned data I bind to vue data object. Works beautifly.

I was a bit sceptical about doing searching this way, but run some tests on the database containing around 10 000 records and I was suprised, it works really well. I am not 100% sure if this is the most efficient way of doing things, but hey it works. This is a very simple app and 10 000 "items" sounds like a good edge case.

So I have exactly what I needed no page reload, pagination and instant search against the whole data, cool !

In the way I am glad that nobody responded in time, it pushed me to figure it out by myself :) Feeling satisfied :D

Thanks Guys.

Even bigger thanks to Jeffrey for Laracasts.

@cyberfountain could you share a sample code?