BootStrap Pagination

by freedawirl

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>


<div id="content-wrapper">
    <div class="inner clearfix">
        <section id="main-content">
            <h3>
                <a id="intro" class="anchor" href="#intro"><span
                        class="octicon octicon-link"></span></a>Intro</h3>

            <p>This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes:
                <code>.pagination</code> (you change this one), <code>.active</code> and <code>.disabled</code>.
                Check out the demo.</p>

            <p class="text-center">Click to download:</p>

            <p class="text-center">
                <a href="https://github.com/esimakin/twbs-pagination/zipball/master" class="button text-left">
                    <small>Download</small>
                    .zip file
                </a>
                <a href="https://github.com/esimakin/twbs-pagination/tarball/master" class="button text-left">
                    <small>Download</small>
                    .tar.gz file
                </a>
            </p>

            <h3>
                <a id="demo" class="anchor" href="#demo"><span
                        class="octicon octicon-link"></span></a>Demo</h3>

            <div id="page-content" class="well">Page 1</div>
            <div class="text-center">
                <ul id="pagination-demo" class="pagination-sm"></ul>
            </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,...

JavaScript

$(document).ready(function () {
    $('#pagination-demo').twbsPagination({
        totalPages: "35",
        visiblePages: "10",
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });

    $('#visible-pages-example').twbsPagination({
        totalPages: 35,
        visiblePages: 10
    });

    $('.sync-pagination').twbsPagination({
        totalPages: 20,
        onPageClick: function (evt, page) {
            $('#sync-example-page-content').text('Page ' + page);
        }
    });
});