3

Please help me, I don't know how to use jqPagination (http://beneverard.github.com/jqPagination/). I would each page which have other content. Ex, page 1, the content is a paragraph, page 2 is other paragraph. And I don't want click show/hide to show the content.

Thank you!

MAXE
  • 4,978
  • 2
  • 45
  • 61
user1506759
  • 33
  • 1
  • 3

2 Answers2

9

Right, I can only assume 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 in order 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 the use the plugin to be able to show and hide a range of paragraphs. Of course this example could be extended to work with other elements / scenarios too.

Be sure to comment back on whether this solved your problem.

Ben Everard
  • 13,652
  • 14
  • 67
  • 96
  • You're very welcome, any more jqPagination questions post them here on Stack Overflow with the `jqPagination` tag, it'll appear in my RSS reader. – Ben Everard Jul 09 '12 at 13:36
  • @BenEverard : is it possible to get data using ajax and php in jqpagination? – sqlchild Jan 17 '14 at 11:48
  • jqPagination abruptly stopped working, this fiddle doesn't work anymore either. Was there an update? – trueinViso Jul 14 '15 at 19:07
  • Looks like Github doesn't support serving raw JS files, jsfiddle is using these as references so that'd be the issue. – Ben Everard Jul 15 '15 at 10:21
3

I am using jPages. This works fine.

Just give your page an id. And place a div underneed this information.

in you jQuery you just can add this:

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

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

You can check jPages here

Sllix
  • 606
  • 9
  • 28