สำหรับวิธีการสร้างนั้นก่อนอื่นเราก็ต้องหาจำนวนของปุ่มที่เราต้องการสร้างก่อนครับ
โค้ด: เลือกทั้งหมด
function randerPage(data1) {
console.log(vv);
console.log(data1);
if (data1 % 5 == 0) {
i = data1 / 5;
maxpage = data1 / 5
}
else {
i = data1 / 5 + 1;
maxpage = data1 / 5 + 1
}
// vv = 0
if(i<=9){
for (let index = 1; index <= i; index++) {
console.log(i);
console.log(curPage);
console.log(index);
if (vv == 0) {
if (index == 1 && curPage !=1) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage(${index - 1})' >Previous</a></li>`
}
if (index == curPage) {
console.log("aaaaaa");
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link ' onclick='changePage(${index})' style='background-color:#337ab7 ;color:#FFFFFF;' >${index}</li>`
}
else {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
}
if (index == Math.floor(i) && curPage !=Math.floor(i)) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage(${index + 1})' >Next</a></li>`
}
}
}
}
else{
if(curPage>5 && Number(curPage)+4<=maxpage){
let o = Number(curPage)-4;
let oo = Number(curPage)+4;
for (let index = o; index <= oo; index++) {
console.log(i);
console.log(curPage);
console.log(index);
if (vv == 0) {
if (index == o && curPage !=1) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage(${index - 1})' >Previous</a></li>`
}
if (index == curPage) {
console.log("aaaaaa");
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link ' onclick='changePage(${index})' style='background-color:#337ab7 ;color:#FFFFFF;' >${index}</li>`
}
else {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
}
if (index == oo && curPage !=Math.floor(i)) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage(${index + 1})' >Next</a></li>`
}
}
}
}
else if(curPage>5 && Number(curPage)+4>maxpage){
let *** = Math.floor(maxpage)- Number(curPage)
let o = Number(curPage)-4-4+***;
let oo = Number(curPage)+***;
for (let index = o; index <= oo; index++) {
console.log(i);
console.log(curPage);
console.log(index);
if (vv == 0) {
if (index == o && curPage !=1) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage(${index - 1})' >Previous</a></li>`
}
if (index == curPage) {
console.log("aaaaaa");
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link ' onclick='changePage(${index})' style='background-color:#337ab7 ;color:#FFFFFF;' >${index}</li>`
}
else {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
}
if (index == oo && curPage !=Math.floor(i)) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage(${index + 1})' >Next</a></li>`
}
}
}
}
else{
for (let index = 1; index <= 9; index++) {
console.log(i);
console.log(curPage);
console.log(index);
if (vv == 0) {
if (index == 1 && curPage !=1) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage(${index - 1})' >Previous</a></li>`
}
if (index == curPage ) {
console.log("aaaaaa");
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link ' onclick='changePage(${index})' style='background-color:#337ab7 ;color:#FFFFFF;' >${index}</li>`
}
else {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
}
if (index == 9 && curPage !=Math.floor(i)) {
document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage(${index + 1})' >Next</a></li>`
}
}
}
}
}
}
ในหน้า html
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="row justify-content-center">
<div class="col-10 table-responsive ">
<div class="text-center">
<nav aria-label="Page navigation example" style="display: inline-block !important;">
<ul class="pagination " id="cat" ></ul>
</nav>
</div>
</div>
</div>
</div>