I am doing pagination for 325 pages in bootstrap. For that I had given the following code:
<pre><div class="container">
<ul class="pager">
<ul class="pagination">
<li><a href="01_1_Alankarsahitya_OI.html">First</a></li>
<li><a href="#">Previous</a></li>
<li class="active"><a href="01_1_Alankarsahitya_OI.html">1</a></li>
<li><a href="01_2_Alankarsahitya_OI.html">2</a></li>
<li><a href="01_3_Alankarsahitya_OI.html">3</a></li>
<li><a href="01_4_Alankarsahitya_OI.html">4</a></li>
<li><a href="02_1_Upanishad_OI.html">5</a></li>
<li><a href="02_2_Upanishad_OI">6</a></li>
<li><a href="02_3_Upanishad_OI">7</a></li>
<li><a href="02_4_Upanishad_OI">8</a></li>
<li><a href="02_5_Upanishad_OI">9</a></li>
<li><a href="02_6_Upanishad_OI">10</a></li>
<li><a href="02_7_Upanishad_OI">11</a></li>
<li><a href="02_8_Upanishad_OI">12</a></li>
<li><a href="02_9_Upanishad_OI">13</a></li>
<li><a href="02_10_Upanishad_OI">14</a></li>
<li><a href="02_11_Upanishad_OI">15</a></li>
<li><a href="02_12_Upanishad_OI">16</a></li>
<li><a href="03_1_Kamshashtra_OI">17</a></li>
<li><a href="04_1_1_Kavya_OI">18</a></li>
<li><a href="04_1_2_Kavya_OI">19</a></li>
<li><a href="04_1_3_Kavya_OI">20</a></li>
In this way I had completed coding up to 325 pages.
<li><a href="25_32_Stotra_OI.html">321</a></li>
<li><a href="25_33_Stotra_OI.html">322</a></li>
<li><a href="25_34_Stotra_OI.html">323</a></li>
<li><a href="25_35_Stotra_OI.html">324</a></li>
<li><a href="26_1_Smrutigrantha_OI.html">325</a></li>
<li><a href="#">Next</a></li>
<li><a href="26_1_Smrutigrantha_OI.html">Last</a></li>
</ul>
</div>
What I have tried:
I had added following js code before the pagination codes:
<pre><div class="container">
<nav aria-label="Page navigation">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../jquery.twbsPagination.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<nav aria-label="Page navigation">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
<script type="text/javascript">
$(function () {
window.pagObj = $('#pagination').twbsPagination({
totalPages: 325,
visiblePages: 10,
onPageClick: function (event, page) {
console.info(page + ' (from options)');
}
}).on('page', function (event, page) {
console.info(page + ' (from event listening)');
});
});
</script>
But the pagination shows all 325 pages. I want 10 pages should be shown, i.e.
First Previous 1 2 3 4 5 6 7 8 9 10 Next Last
And if I click on pg. 10 next 9 pages should be displayed in the pagination. Pl. help me.
Thanks in advance.
Submit an article or tip