1<nav aria-label="Page navigation example">
2 <ul class="pagination">
3 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
4 <li class="page-item"><a class="page-link" href="#">1</a></li>
5 <li class="page-item"><a class="page-link" href="#">2</a></li>
6 <li class="page-item"><a class="page-link" href="#">3</a></li>
7 <li class="page-item"><a class="page-link" href="#">Next</a></li>
8 </ul>
9</nav>
1Use the class .justify-content-center on the .pagination ul.
2
3e.g. <ul class="pagination justify-content-center">
1var current_page = 1;
2var records_per_page = 2;
3
4var objJson = [ { adName: "AdName 1"}, { adName: "AdName 2"}, { adName: "AdName 3"}, { adName: "AdName 4"}, { adName: "AdName 5"}, { adName: "AdName 6"}, { adName: "AdName 7"}, { adName: "AdName 8"}, { adName: "AdName 9"}, { adName: "AdName 10"}]; // Can be obtained from another source, such as your objJson variable
5
6function prevPage()
7{
8 if (current_page > 1) {
9 current_page--;
10 changePage(current_page);
11 }
12}
13
14function nextPage()
15{
16 if (current_page < numPages()) {
17 current_page++;
18 changePage(current_page);
19 }
20}
21
22function changePage(page)
23{
24 var btn_next = document.getElementById("btn_next");
25 var btn_prev = document.getElementById("btn_prev");
26 var listing_table = document.getElementById("listingTable");
27 var page_span = document.getElementById("page");
28
29 // Validate page
30 if (page < 1) page = 1;
31 if (page > numPages()) page = numPages();
32
33 listing_table.innerHTML = "";
34
35 for (var i = (page-1) * records_per_page; i < (page * records_per_page); i++) {
36 listing_table.innerHTML += objJson[i].adName + "<br>";
37 }
38 page_span.innerHTML = page;
39
40 if (page == 1) {
41 btn_prev.style.visibility = "hidden";
42 } else {
43 btn_prev.style.visibility = "visible";
44 }
45
46 if (page == numPages()) {
47 btn_next.style.visibility = "hidden";
48 } else {
49 btn_next.style.visibility = "visible";
50 }
51}
52
53function numPages()
54{
55 return Math.ceil(objJson.length / records_per_page);
56}
57
58window.onload = function() {
59 changePage(1);
60};
61
1<nav aria-label="Page navigation example">
2 <ul class="pagination justify-content-center">
3 <li class="page-item disabled">
4 <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
5 </li>
6 <li class="page-item"><a class="page-link" href="#">1</a></li>
7 <li class="page-item"><a class="page-link" href="#">2</a></li>
8 <li class="page-item"><a class="page-link" href="#">3</a></li>
9 <li class="page-item">
10 <a class="page-link" href="#">Next</a>
11 </li>
12 </ul>
13</nav>
1// input
2$page, $limit
3
4// output
5$offset = (($page - 1) * $limit);
6$limit = $limit;