Here is corresponding piece of code:
- $('#pagination-demo').twbsPagination({
- totalPages: 35,
- visiblePages: 7,
- onPageClick: function (event, page) {
- $('#page-content').text('Page ' + page);
+ $('#pagination-demo').twbsPagination({
+ totalPages: 35,
+ visiblePages: 7,
+ onPageClick: function (event, page) {
+ $('#page-content').text('Page ' + page);
}
});
And HTML code:
- <ul id="pagination-demo" class="pagination-sm"></ul>
+ <ul id="pagination-demo" class>="pagination-sm"></ul>
+
Examples
+ Dynamic total pages number
+
+ This is from frequently asked questions. For e.g. - How can I set new number of total pages?
+ How can I initialize plugin with new set of options?
+ How to refresh or redraw it?
+
+ You can do it with two simple steps. Call destroy method and then initialize it
+ with new options.
+
+ var $pagination = $('selector');
+ var defaultOpts = {
+ totalPages: 20
+ };
+ $pagination.twbsPagination(defaultOpts);
+ $.ajax({
+ ...,
+ success: function (data) {
+ var totalPages = data.newTotalPages;
+ var currentPage = $pagination.twbsPagination('getCurrentPage');
+ $pagination.twbsPagination('destroy');
+ $pagination.twbsPagination($.extend({}, defaultOpts, {
+ startPage: currentPage,
+ totalPages: totalPages
+ }));
+ }
+ });
+
+
+
+
+
+
+
+ Here you can change the total pages:
+
+
+
+
+
Synchronized pagination elements
You can attach multiple paginators to your content and access them via class name.
diff --git a/js/main.js b/js/main.js
index c417284..bbe9455 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,9 +7,24 @@ $(document).ready(function () {
}
});
- $('#visible-pages-example').twbsPagination({
- totalPages: 35,
- visiblePages: 10
+ var $pagination = $('#dynamic-total-pages-pagination');
+ var defaultOpts = {
+ totalPages: 20
+ };
+ $pagination.twbsPagination(defaultOpts);
+
+ $('#dynamicTotalForm').submit(function (evt) {
+ evt.preventDefault();
+ var totalPages = $(evt.target).find('.js-total-pages-value').val();
+ if (!totalPages) {
+ return;
+ }
+ var currentPage = $pagination.twbsPagination('getCurrentPage');
+ $pagination.twbsPagination('destroy');
+ $pagination.twbsPagination($.extend({}, defaultOpts, {
+ startPage: currentPage,
+ totalPages: totalPages
+ }));
});
$('.sync-pagination').twbsPagination({
@@ -19,23 +34,5 @@ $(document).ready(function () {
}
});
- $('#not-spa-demo').twbsPagination({
- totalPages: 15,
- visiblePages: 5,
- href: "?a=&page={{number}}&c=d",
- onPageClick: function (event, page) {
- $('#not-spa-demo-content').text('Page ' + page);
- }
- });
-
- $('#not-spa-demo-2').twbsPagination({
- totalPages: 15,
- visiblePages: 5,
- href: "#page={{pageNumber}}&c=d",
- hrefVariable: '{{pageNumber}}',
- onPageClick: function (event, page) {
- $('#not-spa-demo-content-2').text('Page ' + page);
- }
- });
});