ตัวอย่างของโค้ดนะครับ โดยใช้ภาษา 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();
}
รูปตัวอย่างของการเขียน สรุปได้ว่า การเขียนเปลี่ยนหน้าแสดงข้อมูลโดยมีตัวเลข จากฐานข้อมูลจะให้เราเข้าดูข้อมูลได้สะดวกมากขึ้น มากกว่า การที่มีแค่หน้าไปต่อ ย้อนกลับ การดูข้อมูลแบบข้ามหน้า หรือจะไปแค่หน้าที่ต้องการก็ทำได้สะดวกกว่านั่นเอง หวังว่าจะเป็นประโยชน์ต่อผู้อ่า่นนะครับ
อ้างอิง
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