NeoNe's avatar

Vue.js + Laravel pagination

I just fall in love with Vue.js thanks to Jeff for reviling Vue to me and such great tutorials here at Laracasts. Vue.js is simple fast and easy to understand well everything here is easy to understand thanks to Jeff :). but for my taste is better then Angular and actually is based on Angular but the only difference is that there is no need for recreate Laravel controllers and services and routes no offense to Angular lovers but for me Angular it does some gibberish with HTML I dont like and it feels like the movie Inception the dream in dream, controller in controller, routes in routes, etc.. when it works with Laravel maybe standalone is ok but with Laravel is kinda Laraception but enough of this lets get to case..

What would be the best way to create pagination with vue.js in Laravel?? I see some people in Angular do it with blade like {!! $products->render() !!} then they preventDefault so the page doesn't refresh but how to get new numbers in pagination I tried to make pagination with vue just by reading number of pages from pagination json results, then count em and append them to the page but then I get long list of numbers from Prev 1 to 38 Next instead Prev 12345..38 Next also it would be nice to change link in url on each click without leaving page so you can copy/paste a link that leads you to exact page. I did that with new html5 window.history.pushState and it works fine for now but I don't know is that the best solution. Also there is refresh 'blink' when you click on next button and when new ajax request happens but I think that could be solved !! -- maybe in background if you load with Laravel like 200 results per page but display 50 results with Vue and then when you hit like 150 results there is new ajax request so there is no blinking between pages what you guys think ??

0 likes
11 replies
kfirba's avatar

@NeoNe How about an ajax request? You simply show the first page and when a user clicks on another page, you take its URI, and send an ajax request to that link. Also, you may change the class of the link so it displays as active

1 like
bazz3l's avatar

This might help you if this problem is not sorted.

https://gist.github.com/anonymous/7297cba521b2b18cb9f5

<ul class="pager">
    <li class="previous" v-show="pagination.previous">
        <a class="page-scroll" v-on:click="fetchArticlesPaginate('previous')" href="#">Previous</a>
    </li>
    <li class="next" v-show="pagination.next">
        <a class="page-scroll" v-on:click="fetchArticlesPaginate('next')" href="#">Next</a>
    </li>
</ul>
jekinney's avatar

You really can't use laravels pagination with JavaScript per say.

The way I do it is get a count of rows, set a default limit with eloquent. Set as api. Then grab with vue via Ajax (vue-resourse). For next page you have to send another get Ajax call for the next chunk via another query with skip and limit using eloquent and so forth.

veve286's avatar

I think u need that kind of component :D Currently i m working on it and release soon. Alt text

2 likes
trevorg's avatar

I also really need a pagination component that will nicely integrate with Laravel.

ratiw's avatar

Also, please check out vuetable component, which has vuetable-pagination component inside and already works well with Laravel's paginate(). Should also work with any CSS Framework. There are examples for Semantic UI and Twitter's Bootstrap as well.

2 likes

Please or to participate in this conversation.