How to use jqPagination

Question

Please help me, I do not know how to use jqPagination ( http://beneverard.github.com/jqPagination/ ). I would have different content on every page. Ex, p. 1, content is a paragraph, p. 2 is another paragraph. And I don't want show / hide to show content.

Thanks!

Answer 1

That's right, I can only assume that you have code similar to this:

<div class="some-container"> <p>My first paragraph</p> <p>My second paragraph</p> <p>My third paragraph</p> </div> <div class="pagination"> <a href="#" class="first" data-action="first">&laquo;</a> <a href="#" class="previous" data-action="previous">&lsaquo;</a> <input type="text" readonly="readonly" /> <a href="#" class="next" data-action="next">&rsaquo;</a> <a href="#" class="last" data-action="last">&raquo;</a> </div> 

And you want to show / hide each of your paragraphs using jqPaginaton, try the following code:

 $(document).ready(function() { // hide all but the first of our paragraphs $('.some-container p:not(:first)').hide(); $('.pagination').jqPagination({ max_page : $('.some-container p').length, paged : function(page) { // a new 'page' has been requested // hide all paragraphs $('.some-container p').hide(); // but show the one we want $($('.some-container p')[page - 1]).show(); } }); });​ 

Take a look at this working jsFiddle example , it demonstrates using a plugin to show and hide a series of paragraphs. Of course, this example can be extended to work with other elements / scripts.

Be sure to comment on whether your problem has been resolved.

Answer 2

I am using jPages. It works great.

Just give your page an id. And put the div under this information.

in jQuery you can add this:

 $(".holder").jPages({ containerID: "pageDivId", perPage: 3 }); 

The holder is the new div you created. And containerId is the identifier of your entire pagediv.

You can check jPages here