jqPagination showing only one element

Question

I am using jqPagination plugin to paginate my news archives. News are getting displayed from backend using this format:

<ul class="news-pagination">
    <li>
        <h5>Title</h5>
        <p>News text</p>
        <a href="#">read more</a>
    </li>
</ul>

For pagination I am using following script, found here:

$(document).ready(function() {
    $('.news-pagination li:not(:first)').hide();
    $('.pagination').jqPagination({
        max_page: $('.news-pagination li').length,
        paged: function(page) {
            $('.news-pagination li').hide();
            $($('.news-pagination li')[page - 1]).show();
        }
    });
});

The script works but my problem is that it only show one item (<li>) per page and I have no idea how to set post per page number so I could display 10 post per page.

Answer 1

Slice should work well here, especially since it assumes to the end of the array (.length) if it ever goes out of bound.

Skip to bottom for the entire code. Here's the JSFiddle to see it in action.

---

First off, when the page loads:

$('.news-pagination li').slice(10).hide();

Rather than using CSS (which may be incompatible with certain browsers), we'll just hide all the news after the 10th one.

---

Next, determining how many pages:

max_page: Math.ceil($('.news-pagination li').length / 10),

The pagination script only keeps track of pages. It's up to you to determine what number you'll need. You said you wanted 10 per page, so we'll take the total length of the array of news you have and divide by 10. So if we have 55 news articles, that 5.5 pages. But 5.5 pages sounds weird... what we really would like is to round up. Math.ceil does that for us. So now we have 5 pages of 10 items each and the remainder of the news on the 6th page. Just an example. But that will set up the pagination for us nicely.

---

Now for the user interaction:

A site visitor wants to go to the next page. We only dealt with getting everything to look how we want it for when the page initially loads. Well, the pagination script lets us deal with that with: paged: function (page)

$('.news-pagination li').hide();

This will get rid of all the news items to prepare for the next page of news. We can technically recalculate the items we're currently dealing with, but that would be a waste of time.

---

Last step:

$('.news-pagination li').slice((page - 1) * 10, (page * 10)).show();

This is the icing on the pagination cake - what we have here is that we're slicing 10 items out of the array of news for to show the reader. Since we are given the page that has been requested, we just need to pass in the right numbers to get the news that should display on that particular page.

Page 1: slice(0, 10) // first 10 items

Page 2: slice(10, 20) // next 10 items

Page 3: slice(20, 30) // and so on

---

Altogether, we have this:

$(document).ready(function () {

    $('.news-pagination li').slice(10).hide();

    $('.pagination').jqPagination({
        max_page: Math.ceil($('.news-pagination li').length / 10),
        paged: function (page) {
            $('.news-pagination li').hide();
            $('.news-pagination li').slice((page - 1) * 10, (page * 10)).show();
        }
    });

});