BootStrap Pagination-PC

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">
     

    </div>
</div>


<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
         <section class="main-content">


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

            <div class="page-content" class="well">Page 1 Content</div>
            <div class="text-center">
                <ul id="pagination-section1" class="pagination-sm"></ul>
            </div>

        </section>
      </div>
      <!--Section 2 --->
    <div role="tabpanel" class="tab-pane" id="profile">
  
         <section class="main-content">
            <h3>
                <a id="demo" class="anchor" href="#demo"><span
                        class="octicon octicon-link"></span></a>Category 2</h3>

            <div class="page-content" class="well">Page 2 Content</div>
            <div class="text-center">
                <ul id="pagination-section2" class="pagination-sm"></ul>
            </div>

        </section>
       ...

JavaScript

$(document).ready(function () {
    $('#pagination-section1').twbsPagination({
        totalPages: "10",
        visiblePages: "10",
        onPageClick: function (event, page) {
            $('.page-content').text('Page ' + page);
        }
    });
//Category2
        $('#pagination-section2').twbsPagination({
        totalPages: "3",
        visiblePages: "3",
        onPageClick: function (event, page) {
            $('.page-content').text('Page ' + page);
        }
    });
//Category3
        $('#pagination-section3').twbsPagination({
        totalPages: "5",
        visiblePages: "5",
        onPageClick: function (event, page) {
            $('.page-content').text('Page ' + page);
        }
    });
//Category4
        $('#pagination-section4').twbsPagination({
        totalPages: "4",
        visiblePages: "4",
        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);
        }
    });
});