CODEWITHSUNDEEP
jqueryruby-on-rails
pbms
pbms

Reputation: 633

will_paginate Api to send number of items per_page

I'm implementing e-commerce app which has Product model it contains many products, I want to display the limited number of product per page In the app if we scroll the page it should load the remaining product, Like amazon or flipkart app. How to achieve this in rails?

I have added the will_paginate, It will display the first n number items which is specified in will_paginate per_page. How to display the remaining items? How can I handle that in api's?

Upvotes: 0

Views: 110

Answers (1)

Guru
Guru

Reputation: 1410

you can add kaminari gem or will_paginate gem. I think active_admin uses kaminari inside it.

if you follow there docs (behaviour of both gems is same) it adds page numbers on view. If you want to automatically load next content here is a idea, you have to google out how you will achive that.

show first x element on screen followed by div with loading icon. add js pagescroll event and check whether this div is visible in screen or not. if yes send ajax request for next elements. after success-full ajax request remove this loading icon div and append results and at end again add loading div so that on page scroll it again send ajax request.

here is jquery sudo code (note you need to check and edit code this is just sudo code) 

page = 0

$(window).unbind("scroll")
handel_scrolling = function(){

if($(".loading").offset()){
    //this if checks whether loading div appears in screen or not
    if($(".loading").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
        page++
        url = "myurl?page=" + page

        $.ajax({
            url: url,
            success: function (data) {
        ele = $(".loading")
                $(".loading").remove()
                $(".list").append(data)
        $(".dashboard-list").append(ele)
            },
            error: function (data) {
                console.log("something went wrong")
            }
        })
    }}
}
$(window).scroll(function(event) {
handel_scrolling()
});

Upvotes: 1

Related Questions