Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Update docs (some js and html code)
  • Loading branch information
Eugene Simakin committed Oct 12, 2016
1 parent 2b601fd commit 4deea4a
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 9 deletions.
1 change: 1 addition & 0 deletions css/stylesheet.css
Expand Up @@ -185,6 +185,7 @@ pre {
text-shadow: none;
overflow: auto;
border: solid 1px #f2f2f2;
margin-bottom: 20px;
}

pre code {
Expand Down
41 changes: 33 additions & 8 deletions index.html
Expand Up @@ -147,8 +147,7 @@ <h3>
});</code></pre>

<p>And HTML code:</p>
<pre><code class="html"> &lt;ul id=&quot;pagination-demo&quot; class>=&quot;pagination-sm&quot;&gt;&lt;/ul&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
Expand Down Expand Up @@ -326,9 +325,9 @@ <h4>Dynamic total pages number</h4>
<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="js"> var $pagination = $(<span class="s">'selector'</span>);
<pre><code class="js"> var $pagination = $('selector');
var defaultOpts = {
totalPages: <span class="il">20</span>
totalPages: 20
};
$pagination.twbsPagination(defaultOpts);
$.ajax({
Expand All @@ -342,10 +341,7 @@ <h4>Dynamic total pages number</h4>
totalPages: totalPages
}));
}
});
</code></pre>

<p></p>
});</code></pre>

<div class="text-center">
<div id="dynamic-total-pages-content" class="well"></div>
Expand All @@ -366,6 +362,19 @@ <h4>Synchronized pagination elements</h4>
<p>You can attach multiple paginators to your content and access them via class name.
The following example show this case.</p>

<p>HTML code:</p>
<pre><code class="html"> &lt;ul class=&quot;sync-pagination&quot;&gt;&lt;/ul&gt;
&lt;div id=&quot;content&quot;&gt;Page 1&lt;/div&gt;
&lt;ul class=&quot;sync-pagination pagination-sm&quot;&gt;&lt;/ul&gt;</code></pre>

<p>JS code:</p>
<pre><code class="js"> $('.sync-pagination').twbsPagination({
totalPages: 20,
onPageClick: function (evt, page) {
$('#content').text('Page ' + page);
}
});</code></pre>

<div class="text-center">
<ul class="sync-pagination pagination-sm"></ul>
<div id="sync-example-page-content" class="well">Page 1</div>
Expand All @@ -386,6 +395,22 @@ <h4>Alternative style pagination (with start and end page numbers)</h4>
<a href="https://github.com/flaviusmatis/simplePagination.js">flaviusmatis/simplePagination.js</a>
plugin.</p>

<p>JS code:</p>
<pre><code class="js"> $('selector').pagination({
items: 20,
itemOnPage: 8,
currentPage: 1,
cssStyle: '',
prevText: '&lt;span aria-hidden=&quot;true&quot;&gt;&amp;laquo;&lt;/span&gt;',
nextText: '&lt;span aria-hidden=&quot;true&quot;&gt;&amp;raquo;&lt;/span&gt;',
onInit: function () {
// fire first page loading
},
onPageClick: function (page, evt) {
// some code
}
});</code></pre>

<div class="text-center">
<div id="alt-style-pagination-content" class="well">Page 1</div>
<ul id="alt-style-pagination" class="pagination"></ul>
Expand Down
2 changes: 1 addition & 1 deletion js/main.js
Expand Up @@ -50,6 +50,6 @@ $(document).ready(function () {
onPageClick: function (page, evt) {
$('#alt-style-pagination-content').text('Page ' + page);
}
})
});
});

0 comments on commit 4deea4a

Please sign in to comment.