BootStrap Pagination

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="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">10</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);
        }
    });</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>

           
        </section>

    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#pagination-demo').twbsPagination({
        totalPages: "15",
        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);
        }
    });
});