ปัญหาการใช้ JPagination ร่วมกับ Grid.Sort ใน Frontend
แก้ไขล่าสุด ใน วันพุธที่ 05 พฤษภาคม 2553 เวลา 13:06 น. เขียนโดย ประสิทธิ์ เก็บทรัพย์ วันพุธที่ 17 มีนาคม 2553 เวลา 11:46 น.
วันนี้มีปัญหาใหม่มาให้ขบอีกแล้วครับ หลังจากที่ปกติผู้เขียนจะพัฒนา Component ในฝั่ง Backend เป็นส่วนใหญ่ โดยมีการใช้งาน JPagination และ grid.sort บ่อยๆ ก็ไม่มีปัญหาอะไร พอนำสองส่วนนี้มาใช้งานในการพัฒนา Component สำหรับ Intranet เจอปัญหาเลยครับ เนื่องจากว่าต้องการให้ผู้ดูแล Component ทำหน้าที่ Admin ในฝั่ง Frontend ปรากฏว่า มันไม่สามารถใช้งานร่วมกันได้ครับ มาเริ่มดูกันตั้งแต่ต้นครับว่าทำไม สาเหตุก็มาจาก JPagination ครับเนื่องจากว่าทาง Frontend ตัว Pagination Class มันจะสร้างเป็น Link ครับ คือ <a href=..... > ซึ่งต่างกับในฝั่ง Backend ที่มันจะทำเป็น JavaScript Onclick เพื่อกำหนดค่า Limit Start แล้วก็ทำการ submit ตัว form
ปัญหาก็มีจากการสร้าง Link นี่ละครับ เช่นถ้าผู้เขียนมี link เป็น index.php?option=com_jtimesheet&task=timesheet.getlist&m=my&Itemid=76 ถ้าเรามาที่ link นี้ตอนแรกและ click ที่ Pagination Link เพื่อไปหน้าต่างๆ มันยังไปได้ครับ เพราะ Link ยังถูก แต่ถ้าเราไปกดที่ Grid.Sort เพื่อทำการเรียงข้อมูล Link ของเราจะกลายเป็น index.php?option=com_jtimesheet&Itemid=76 ครับ แต่การ sort ยังทำงานได้ปกติครับ เพราะมันทำการ submit form เราก็ยังสามารถเพิ่ม hidden field ไว้ใน form ได้ อ๋อ ปกติในการพัฒนา Component ผู้เขียนใช้ชื่อ form เป็น adminForm ทั้งหมดเพื่อให้สามารถประยุกตฺใช้ joomla.javascript ได้ รวมทั้งการใช้งาน Toolbar ในผั่ง Frontend ได้ หลังจากนั้นถ้าเรามากด Pagination Link อีกที เราจะไม่อยู่ที Link เดิมตามที่เราต้องการแล้วครับ มันจะไปอยู่ที่ link ใหม่ คือ index.php?option=com_jtimesheet&Itemid=76 ซึ่งขึ้นอยู่กับ Component ของเรามี default controller เป็นอะไร
ทำไมทาง Frontend ไม่ใช้ JavaScript Onclick เหมือ Backend
สาเหตุเนื่องจากทาง Backend เราจะใช้ form เป็น adminForm เหมือนกันหมด ในขณะที่ทาง Frontend ไม่ได้กำหนดไว้ตายตัว ดังนั้นจึงไม่สามารถใช้งาน JavaScript ได้เนื่องจากมันจะใช้เป็น
<a href="#" onclick="document.adminForm.limitstart.value=20;document.adminform.submit(); return false" >2</a>
ผู้เขียนคาดว่าน่าจะเป็นสาเหตุที่ทาง Frontend เลยไม่ได้ใช้ onclick ซึ่งคงต้องทดลองดู โดยการแก้ที่ Chrome ของ Template ใน folder ของ template จะมี folder ชื่อ html และในนั้นจะมี pagination.php อยู่ก็อาจจะลองแก้ดูก็ได้ครับ
ทางแก้
ผู้เขียนคิดว่ามีหลายวิธีแต่อาจจะไม่ใช่ Best Practice โดยเฉพาะในตอนนี้
1. เป็นวิธีการที่เรียกว่า Work Around คือการทำงานรอบๆ ปัญหา แบบว่าเลี่ยงๆ ไป คือการกำหนด action ของ form ให้เป็น url แบบเต็มรูปแบบที่ pagination ต้องใช้ เช่น
<form action="index.php?option=com_jtimesheet&task=timesheet.getlist&m=my&Itemid=76" name="adminForm" method=..>
........
<input type="hidden" name="task" value="timesheet.getlist" />
......
</form>
2. ใช้การแก้ปัญหาโดยทำให้ pagination ใช้ onclick แบบเดียวกับ Backend อย่างที่กล่าวมา แต่ต้องศึกษาผลกระทบในฝั่ง Frontend ด้วยนะครับ อย่างที่ลองกับ rokajaxsearch ก็ใช้ไม่ได้ครับ สำหรับไฟล์ตัวอย่างก็ดูได้จาก administrator/templates/khepri/html/pagination.php ครับ อาจจะต้องดู css นิดนึงนะครับ ว่าแสดงได้ถูกต้องหรือไม่
3. สร้าง class โดยการสืบทอดจาก JPagination และทำการ load Chrome ของตัวเองโดยอาจะเก็บไว้ที่เดียวกันกับ pagination.php เพื่อการ reused ในหลายๆ component ของเราครับ เช่น joomlant_pagination.php ครับใน class เราต้อง override ส่วนของการ load Chrome ครับ คือแทนที่จะให้ load pagination.php ก็เปลี่ยนเป็น load joomlant_pagination.php แทนครับ โดยในไฟล์นี้เราก็จะใช้งาน onclick ได้แล้วครับ เพราะว่าทุกๆ component ของเราจะใช้ class นี้และใช้ชื่อ Form เป็น adminForm ได้ โดยวิธีการนี้ผมเขียนเป็นภาษาอังกฤษไว้ที่ www.joomlant.org สำหรับท่านที่อยากอ่านรายละเอียดก็ขอเชิญได้ครับ
ยังไงวิธีการไหนดีหรือไม่ดีอย่างไร ทางผู้เขียนขอทดลองและค้นคว้าดูก่อน แล้วจะนำผลมาแจ้งให้ทราบครับ
หมายเหตุ grid.sort คือการทำ grid ให้ table header สามารถ click เพื่อทำการ sort ได้โดยโดยการใช้งาน JHTML::_('grid.sort', ...) สามารถดูรายละเอียดการใช้งานได้จาก docs.joomla.org เช่นเดียวกับการแบ่งหน้าของการแสดงผล (pagination) ครับ
| การเชื่อมต่อฐานข้อมูลภายนอกบน Joomla! 1.5< ย้อนกลับ | ถัดไป >Component Development Part 1 Model-View-Controller |
|---|


