Update docs

Arifshariar7 · Oct 4, 2016 · a326c6f · a326c6f
1 parent ffdcaf4
commit a326c6f
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 30 deletions.
diff --git a/css/color-brewer.css b/css/color-brewer.css
diff --git 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
@@ -13,6 +13,13 @@
     <link rel="stylesheet" type="text/css" href="css/pygment_trac.css" media="screen"/>
     <link rel="stylesheet" type="text/css" href="css/print.css" media="print"/>
 
+    <!--<link rel="stylesheet" type="text/css" href="css/color-brewer.css">-->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
+    <script type="text/javascript">
+        hljs.initHighlightingOnLoad();
+    </script>
+
     <script src="//code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
@@ -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;
+        }
     </style>
 
     <title>jQuery Pagination plugin</title>
@@ -102,18 +130,17 @@ <h3>
             </div>
 
             <p>Here is corresponding piece of code:</p>
-            <pre><code class="highlight">    $(<span class="s">'#pagination-demo'</span>).twbsPagination({
-        totalPages: <span class="il">35</span>,
-        visiblePages: <span class="il">7</span>,
-        onPageClick: <span class="k">function</span> (event, page) {
-            $(<span class="s">'#page-content'</span>).text(<span class="s">'Page '</span> + page);
+            <pre><code class="js">    $('#pagination-demo').twbsPagination({
+        totalPages: 35,
+        visiblePages: 7,
+        onPageClick: function (event, page) {
+            $('#page-content').text('Page ' + page);
         }
     });</code></pre>
 
             <p>And HTML code:</p>
-            <pre><code class="highlight">    &lt;<span class="nt">ul</span> <span class="na">id</span>=<span
-                    class="s">&quot;pagination-demo&quot;</span><span class="na"> class</span>=<span class="s">&quot;pagination-sm&quot;</span>&gt;&lt;/<span
-                    class="nt">ul</span>&gt;</code></pre>
+            <pre><code class="html">    &lt;ul id=&quot;pagination-demo&quot; class>=&quot;pagination-sm&quot;&gt;&lt;/ul&gt;
+            </code></pre>
 
             <h3>
                 <a id="options-and-events" class="anchor" href="#options-and-events"><span
@@ -282,6 +309,48 @@ <h3>
                 <a id="examples" class="anchor" href="#examples"><span
                         class="octicon octicon-link"></span></a>Examples</h3>
 
+            <h4>Dynamic total pages number</h4>
+
+            <p>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?</p>
+
+            <p>You can do it with two simple steps. Call <code>destroy</code> method and then initialize it
+                with new options.</p>
+
+            <pre><code class="highlight">    var $pagination = $(<span class="s">'selector'</span>);
+    var defaultOpts = {
+        totalPages: <span class="il">20</span>
+    };
+    $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
+            }));
+        }
+    });
+            </code></pre>
+
+            <div class="text-center">
+                <div id="dynamic-total-pages-content"></div>
+                <ul id="dynamic-total-pages-pagination" class="pagination-sm"></ul>
+            </div>
+
+            <p>Here you can change the total pages:</p>
+
+            <form id="dynamicTotalForm" class="input-with-button">
+                <input type="number" min="2" max="30" value="2" class="form-control js-total-pages-value">
+                <button type="submit" class="btn btn-default">Change</button>
+            </form>
+
+            <p></p>
+
             <h4>Synchronized pagination elements</h4>
 
             <p>You can attach multiple paginators to your content and access them via class name.

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