วิธีการเขียนเปลี่ยนหน้าตารางข้ออมูล

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

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

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

วิธีการเขียนเปลี่ยนหน้าตารางข้ออมูล

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

การสร้างหน้าตารางข้อมูล เพื่อใช้แสดงตารางข้อมูล จากกระทู้ก่อนหน้าจะมีแค่ หน้าต่อไปและย้อนกลับในส่วนของกระทู้นี้ จะเป็นการสร้าง แบบมีเลขหน้าในการคลิกเพื่อเปลี่ยนหน้าขของตาราง บน HTML เพื่อช่วยให้การแสดงตารางข้อมูล ดูได้สะดวกมากขึ้นและ จะมีวิธีการอย่างไรมาดูกันครับนะครับ

ตัวอย่างของโค้ดนะครับ โดยใช้ภาษา html กับ javascipt

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

const pageSize = 5;
let curPage = 1;
let data

function randerPage() {
    let i
    if (data.length % 5 == 0) {
        i = data.length / 5;
    }
    else {
        i = data.length / 5 + 1;
    }

    for (let index = 1; index <= Math.floor(i); index++) {
        console.log(i);
        if (index == 1) {
            //document.querySelector(".pagination").innerHTML += `<li class='page-item page-link'><a class='page-link' href='#'>Previous</a></li>`
            document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick= 'previousPage()' >Previous</a></li>`
        }

        // document.querySelector(".pagination").innerHTML += `<li class='page-item'><a class='page-link' href='#' onclick='changePage(${index})'>${index}</a></li>`
        document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='changePage(${index})' >${index}</li>`
        if (index == Math.floor(i)) {
            //document.querySelector(".pagination").innerHTML += `<li class='page-item'><a class='page-link' href='#'>Next</a></li>`
            document.querySelector(".pagination").innerHTML += `<li class='page-item page-link' onclick='nextPage()' >Next</li>`
        }
    }
}

async function init(data1) {

    // Select the table (well, tbody)
    table = document.querySelector('#catTable tbody');
    data = data1
    renderTable();
    randerPage()

    // document.querySelector('#nextButton').addEventListener('click', nextPage, false);
    // document.querySelector('#prevButton').addEventListener('click', previousPage, false);
}

function renderTable() {
    // create html
    let result = '';
    

    data.filter((row, index) => {
        let start = (curPage - 1) * pageSize;
        let end = curPage * pageSize;
        if (index >= start && index < end) return true;
    }).forEach(c => {
        result += `<tr>
     <td>${c.id}</td>
     <td>${c.username}</td>
     <td>${c.countb}</td>
     <td>${c.countth}</td>
     <td>${c.countthai}</td>
     <td>${c.counte}</td>
     <td>${c.counteng}</td>
     <td>${c.date1}</td>
     <td>${c.ip}</td>
     <td><input type="button"  value="ดูข้อมูล"  class="btn btn-primary" onclick="ssss(${c.id})"  > </input></td>
     </tr>`


    }); ''
    table.innerHTML = result;

}

function sort(e) {
    let thisSort = e.target.dataset.sort;
    if (sortCol === thisSort) sortAsc = !sortAsc;
    sortCol = thisSort;
    console.log('sort dir is ', sortAsc);
    data.sort((a, b) => {
        if (a[sortCol] < b[sortCol]) return sortAsc ? 1 : -1;
        if (a[sortCol] > b[sortCol]) return sortAsc ? -1 : 1;
        return 0;
    });
    renderTable();
}

function previousPage() {
    if (curPage > 1) curPage--;
    renderTable();
}

function nextPage() {
    if ((curPage * pageSize) < data.length) curPage++;
    renderTable();
}
function changePage(data) {
    console.log(data);
    curPage = data
   
    renderTable();
   
}
นี่จะเป็นในส่วนของ javascipt จากกระทู้ก่อนหน้านี้ จะมีเพิ่มเติมในส่วนของ function randerPage() ที่จะเป็นตัวสร้างจำนวนหน้าจากข้อมูล จะเป็นการนับจำนวนข้อมูลเอามาหาร 5 เพื่อจจะได้รู้ว่ามีปุ่มแสดงหน้ากี่ปุ่ม และจะมีเพิ่ม function changePage(data) ที่จะเป็นไปตามหน้าของ data ในส่วนของโค้ดเพิ่มเติมก็จะประมาณนี้ครับ
รูปตัวอย่างของการเขียน
รูปตัววอย่างการสร้างตารางแบบมีเลขหน้าในการเปลี่ยนหน้าตาราง
รูปตัววอย่างการสร้างตารางแบบมีเลขหน้าในการเปลี่ยนหน้าตาราง
table (2).jpg (32.16 KiB) Viewed 423 times
สรุปได้ว่า การเขียนเปลี่ยนหน้าแสดงข้อมูลโดยมีตัวเลข จากฐานข้อมูลจะให้เราเข้าดูข้อมูลได้สะดวกมากขึ้น มากกว่า การที่มีแค่หน้าไปต่อ ย้อนกลับ การดูข้อมูลแบบข้ามหน้า หรือจะไปแค่หน้าที่ต้องการก็ทำได้สะดวกกว่านั่นเอง หวังว่าจะเป็นประโยชน์ต่อผู้อ่า่นนะครับ

อ้างอิง
http://blog.bru.ac.th/wp-content/uploads/bp-attachments/47323/ch2-HTML-%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B8%A1-%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5.pdf
https://stackpython.medium.com/javascript-ep-3-javascript-output-99cd5eefa1d2
https://devbanban.com/?p=251
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: วิธีการเขียนเปลี่ยนหน้าตารางข้ออมูล

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

การคำนวณแบ่งหน้าใน javascript ไม่ใช่วิธีที่ดีสำหรับโปรแกรมที่มีการดึงข้อมูลจากฐานข้อมูลมาใช้
ควรให้การคำนวณและแบ่งหน้า ตั้งแต่ก่อนดึงข้อมูลมาแสดง เพราะจะทำให้ ลดภาระการทำงานทั้งทางฝั่ง server และ client
ถ้าข้อมูลหลักหมื่นขึ้น จะเริ่มอืด และ หน้าข้อมูลเป็นหลักแสน โปรแกรมที่เขียนแบบนี้จำทำงานไม่ได้ browser แฮง
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: วิธีการเขียนเปลี่ยนหน้าตารางข้ออมูล

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

ขอบคุณครับ สพหรับคำแนะนำครับ จะศึกษาเพิ่มเติมครับผม
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ตอบกลับโพส

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

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