การวนลูบสร้างปุ่ม ในหน้า html โดยใช้ js ทำรูปแบบการแบ่งหน้า ด้วย Javascript

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

การวนลูบสร้างปุ่ม ในหน้า html โดยใช้ js ทำรูปแบบการแบ่งหน้า ด้วย Javascript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

สำหรับการวนลูบสร้างปุ่มในหน้า html โดยใช้ js นั้น ก็จะมีประโยชน์ที่ช่วยในการที่เราสร้างปุ่มที่ไม่รู้จำนวนแน่นอน เช่นการสร้างปุ่มเปลี่ยนหน้าในเว็บหนัง หรือรวมไปถึงการสร้างปุ่มพวกแสดงข้อมูลในตารางที่มีการเปลี่ยนหน้าหลายๆหน้าโดยมีข้อมูลจำนวนมากนั้นเองครับ


สำหรับวิธีการสร้างนั้นก่อนอื่นเราก็ต้องหาจำนวนของปุ่มที่เราต้องการสร้างก่อนครับ

โค้ด: เลือกทั้งหมด

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>`
                    }
                }
        
        
        
        
            }
        }
        
    }

}
อันนี้จะเป็นตัวอย่างของฟังก์ชั่นที่ได้รับค่ของจำนวนของข้อมูลที่มี และจะนำมาแสดงเพื่อแค่ 5 ข้อมูลต่อ 1 หน้า มีการจำกัดจำนวนปุ่มในการแสดงให้มีอยู่แค่เพียง 9 ปุ่ม มีการกำหนดปุ่มย้อนกลับและปุ่มถัดไป จะมีการแสดงสีเข้มเมื่ออยู่หน้านั้นๆ และหาอยู่หน้าแรกจะไม่แสดงปุ่มย้อนกลับ และหาอยู่หน้าสุดท้ายจะไม่แสดงปุ่มไปต่อ นั่นเองครับ

ในหน้า 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>
ตัวอย่างที่ได้
ปุ่ม1.jpg
ปุ่ม1.jpg (5.78 KiB) Viewed 668 times
ปุ่ม2.jpg
ปุ่ม2.jpg (5.46 KiB) Viewed 668 times
ปุ่ม3.jpg
ปุ่ม3.jpg (4.79 KiB) Viewed 668 times
สรุปได้ว่า การสร้างปุ่มที่เราไม่จำเป็นต้องรู้จำนวนข้อมูลหรือจำนวนหน้านั้น ก็จะทำให้เราไม่ต้องฟิกค่าหรือกำหนดจำนวน ไม่ว่าจะสร้างปุ่มกี่ปุ่มก็สามารถทำได้นั่นเองครับ และปุ่มที่แสดงก็จะไม่รกจนเกินไปเพราะมีการกำหนดอยู่แค่ 9 ปุ่ม เท่านั้น ไม่รวมกับปุ่มย้อนกลับหรือไปต่อ นั่นเองครับ
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 71