bootpag - jQuery pagination plugin

jquery paginationBootpag is simple jQuery plugin which helps you create dynamic pagination. Additionally it works well with twitter bootstrap.

When dynamic pagination is needed? 

Whenever our page uses heavy asynchronous loading and we don't know exact number of paginated pages until we make some AJAX requests. Also when our total number of pages changes - for example when we implement dynamic search feature.

Getting started

First of all we need to download bootpag plugin. Let's create basic HTML page. We should prepare HTML elements where we will show content of dynamic loaded pages.

Next we need to load some AJAX data which will tell us, how many pages we've got. Let's say that we load the page, do some ajax loading and then we know the number of total pages in particular topic. After AJAX request we know how many pages we want to show.
In result we would get paginator like this one:
jQuery dynamic pagination simple example

Advanced configuration

Sometimes number of pages to paginate is very high. We want to show only some of numbers at once. Let's make more refined paginator with the help of couple of additional configuration options. We have total 23 pages and we want to see 6 pages at once. Next and previous buttons should not leap through 6 pages - instead should iterate for each page, also page links would be customized.

As a result of this configuration we will get this paginator:
jQuery dynamic pagination advanced example

Visit to Bootpag project homepage to see more examples. For more interesting twitter boostrap extensions and code snippets you can go to

0 komentarze: