Update docs

Arifshariar7 · Nov 3, 2015 · 59cba03 · 59cba03
1 parent e589eb2
commit 59cba03
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -89,9 +89,10 @@ <h3>
             <p>
 
             <ul>Options explanation and default values:
-                <li><code>totalPages</code> the number of pages (required, checked)</li>
-                <li><code>startPage</code> the current page that show on start(default: 1)</li>
-                <li><code>visiblePages</code> maximum visible pages (default: 5)</li>
+                <li><code>totalPages</code> the number of pages (required)</li>
+                <li><code>startPage</code> the current page that show on start(default: <code>1</code>)</li>
+                <li><code>visiblePages</code> maximum visible pages (default: <code>5</code>)</li>
+                <li><code>initiateStartPageClick</code> fire onclick event at start page on plugin initialization (default <code>true</code>)</li>
                 <li><code>href</code> template for pagination links (default <code>false</code>)</li>
                 <li><code>hrefVariable</code> variable name in href template for page number (default
                     <code>{{number}}</code>)
@@ -161,6 +162,50 @@ <h4>Synchronized pagination elements</h4>
                 <ul class="sync-pagination pagination-sm"></ul>
             </div>
 
+            <h4>Using <code>href</code> and <code>hrefVariable</code> options / Example 1</h4>
+
+            <p>Warning! <br />
+                Page has been reload
+            </p>
+
+            <p>We do develop not always SAP (single page app). In that case you should have use this
+                <code>options</code></p>
+
+            <div id="not-spa-demo-content" class="well">Page 1</div>
+            <div class="text-center">
+                <ul id="not-spa-demo" class="pagination-sm"></ul>
+            </div>
+
+            <p>Piece of code:</p>
+            <pre><code class="highlight">   $(selector).twbsPagination({
+        totalPages: <span class="il">15</span>,
+        visiblePages: <span class="il">5</span> ,
+        href: <span class="s">'?a=&page={{number}}&c=d'</span> ,
+        onPageClick: function (event, page) {
+            $(<span class="s">'#not-spa-demo-content'</span>).text('Page ' + page);
+        }
+    });
+            </code></pre>
+
+            <h4>Using <code>href</code> and <code>hrefVariable</code> options / Example 2</h4>
+
+            <div id="not-spa-demo-content-2" class="well">Page 1</div>
+            <div class="text-center">
+                <ul id="not-spa-demo-2" class="pagination-sm"></ul>
+            </div>
+
+            <p>Piece of code:</p>
+            <pre><code class="highlight">   $(selector).twbsPagination({
+        totalPages: <span class="il">15</span>,
+        visiblePages: <span class="il">5</span>,
+        href: <span class="s">'#page={{pageNumber}}&c=d'</span>,
+        hrefVariable: <span class="s">'{{pageNumber}}'</span>,
+        onPageClick: function (event, page) {
+            ...
+        }
+    });
+            </code></pre>
+
             <h3>
                 <a id="license" class="anchor" href="#license"><span
                         class="octicon octicon-link"></span></a>License</h3>

diff --git a/js/main.js b/js/main.js
@@ -18,5 +18,25 @@ $(document).ready(function () {
             $('#sync-example-page-content').text('Page ' + page);
         }
     });
+
+    $('#not-spa-demo').twbsPagination({
+        totalPages: 15,
+        visiblePages: 5,
+        href: "?a=&page={{number}}&c=d",
+        onPageClick: function (event, page) {
+            console.info(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);
+        }
+    });
 });