Question

im looking for a pagin system that has the following chraracteristics:

i would parse data from a database like this for ex:

<ul>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
</ul>

then this markup would be treated client side with jquery to create a pagination, so no ajax here, i only call the db to populate and build my markup then i treat it with jquery on client side.

anyone knows some good examples on how to make this
tahnks

Answer 1

If you could be a little bit more specific about what exactly you aren’t sure about, that would be very helpful, but with what you’ve given me above, I would say that you want to get all of the information from the database at once (since you specifically cannot use AJAX to bring in more database information as you paginate). As for the pagination portion of your code, I have used gbirke’s jQuery pagination module to great success.

https://github.com/gbirke/jquery_pagination#readme

— EDIT —

Wanted to address your comments here. This plugin can absolutely be used with DB and php. I’m assuming that you can get your above comments onto the page through php from the DB:

<ul>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
<li>data extracted from db<li>
</ul>

Basically, you just hide the content at the ul level and give the ul a class. You would then use a jquery selector to pick out the elements from that list that you need and clone them. For instance, you would want your pagination callback to have something like this:

$('.paged-content-area').empty();
for(var i = 0; i < items_per_page; i++) {
    var new_content = $('ul.hidden-content li:eq('+((page_index*items_per_page) + i)+')').clone();
    $('.paged-content-area').append(new_content);
}

Hopefully that gets you where you want to be!