|
|
|
การใช้งาน pagination ติดปัญหาเมื่อกดเปลี่ยนไปหน้าถัดไป |
|
|
|
|
|
|
|
ก็คุณเขียนโค้ดไว้แบบนั้น มันก็เลยทำงานแบบนั้นไง
คือหน้าในรูปที่ 1 คือไฟล์ select.php แล้วในไฟล์ select เมื่อคุณเลือก select box มันก็ทำการ AJAX request ไปยังหน้า family.php แล้วเอาผลลัพธ์จากหน้านั้นมาแสดง
แต่ใน pagination คุณไปส่งลิ้งค์ไปยังหน้า select.php มันก็เลยกลับไปหน้า select โดยพ่วง querystring ?page=ไปด้วย แต่มันไม่ทำงานเพราะคุณต้องวกไปอ่านข้างบนว่าใน select.php คุณเขียนไว้แบบนั้น แล้วมันก็ไม่มีการเรียก AJAX ไปยังหน้า family.php ใดๆอีกด้วย มันจึงจบด้วยรูปที่ 2
ผมว่ากรณีนี้ถ้าคุณเขียนโค้ดเอง ก็แค่ทำความเข้าใจ flow การทำงานเสียใหม่ก็แก้ได้ไม่ยากหรอก จิ๊บๆ ค่อยๆทำความเข้าใจไป
แต่ถ้าไม่ได้เขียนโค้ดเองก็เหนื่อยลากเลยล่ะ เพราะมันผิดตรง pagination แล้ว
ทางแก้ก็ต้องดัก pagination แล้วเอาแค่เลขหน้ามา ทำการส่ง AJAX เหมือนเก่าแต่เพิ่มเลขหน้าเข้าไปด้วย แค่นั้น จบ
|
|
|
|
|
Date :
2024-11-04 21:45:44 |
By :
mr.v |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ส่วนของ <div class="inline">...go2Page()</div> ไม่รู้ยังจำเป็นไหม เพราะไม่เห็นในรูปเลย อันนี้ถ้าไม่ใช้ก็เอาออกไปเลย เพราะเกะกะเปล่าๆ
ส่วนของ pagination ก็เพิ่ม class='pagination-link' กับ data-page-number='" . $i . "' เข้าไป
แก้ไข select box show user ในหน้า select ใส่ id ให้มันด้วย เช่น <select id="users"
แล้วในส่วนของ JS ในหน้า select ก็เพิ่ม JS ไว้ก่อนปิด </body> ก็ได้
Code (JavaScript)
document.addEventListener('click', (event) => {
let thisTarget = event.target;
if (thisTarget.closest('.pagination-link')) {
event.preventDefault();
thisTarget = thisTarget.closest('.pagination-link');
const pageNum = thisTarget.dataset.pageNumber;
// จากนั้นเอาตัวแปร pageNum ไปเรียก showUser อีกที โดยฟังก์ชั่นนั้นก็แก้ไขด้วย ให้มันรองรับ argument ชื่อ pageNum โดยถ้ามีตัวเลขหน้าระบุ ให้ส่งไปเรียก AJAX
showUser(document.getElementById('users').value, pageNum);
}
});
ในส่วนของฟังก์ชั่น showUser ก็เพิ่ม argument เข้าไปพร้อมตรวจเช็คด้วย
Code (JavaScript)
function showUser(str, pageNum) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
let pageQuerystring = '';
if (typeof(pageNum) !== 'string' || isNaN(pageNum)) {
pageQuerystring = '';
} else {
pageQuerystring = '&page=' + pageNum;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","family.php?q="+str + pageQuerystring, true);
xmlhttp.send();
}
ประมาณนี้. ยังไม่ได้ทดสอบนะแต่น่าจะพอได้
|
|
|
|
|
Date :
2024-11-04 22:11:53 |
By :
mr.v |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
แล้วก็
<? เปลี่ยนไปใช้ <?php
ยกเว้น <?=
|
|
|
|
|
Date :
2024-11-04 22:14:29 |
By :
mr.v |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 05
|