From a326c6f78a6d0ab3853165cce216b994a44e6f33 Mon Sep 17 00:00:00 2001 From: Eugene Simakin Date: Tue, 4 Oct 2016 13:41:36 +0300 Subject: [PATCH] Update docs --- css/color-brewer.css | 1 + css/stylesheet.css | 1 - index.html | 85 +++++++++++++++++++++++++++++++++++++++----- js/main.js | 39 ++++++++++---------- 4 files changed, 96 insertions(+), 30 deletions(-) create mode 100644 css/color-brewer.css diff --git a/css/color-brewer.css b/css/color-brewer.css new file mode 100644 index 0000000..ac2b63b --- /dev/null +++ b/css/color-brewer.css @@ -0,0 +1 @@ +.hljs{display:block;overflow-x:auto;padding:0.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-string,.hljs-meta,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.hljs-addition{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-number,.hljs-regexp,.hljs-literal,.hljs-bullet,.hljs-link{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-keyword,.hljs-selector-tag,.hljs-title,.hljs-section,.hljs-built_in,.hljs-doctag,.hljs-type,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-strong{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d} \ No newline at end of file diff --git a/css/stylesheet.css b/css/stylesheet.css index f6df0c4..e13d61a 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -170,7 +170,6 @@ section a.button { code, pre { font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; color: #222; - margin-bottom: 30px; font-size: 13px; } diff --git a/index.html b/index.html index 2b88c12..3e505c0 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,13 @@ + + + + + @@ -29,6 +36,10 @@ border-spacing: 0; } + .hljs { + background-color: #fff; + } + td, th { text-align: center; border: 1px solid #CCC; @@ -51,6 +62,23 @@ tr td:nth-child(2) { text-align: left; } + + .input-with-button { + padding: 10px; + } + + .input-with-button .btn { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } + + .input-with-button input { + width: 200px; + border-radius: 0; + display: inline-block; + vertical-align: middle; + } jQuery Pagination plugin @@ -102,18 +130,17 @@

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);
-        }
-    });
 });