PHP MySQL Pagination แบ่งหน้าการแสดงผลด้วย PHP Mysqli กรณีที่มีจำนวนแถวข้อมูลมาก

ในการทำเว็บไซต์หากคุณมีจำนวนข้อมูล(แถว) มากๆ จนเลื่อนลงไม่รู้จะจบเมื่อไหร หรือ ข้อมูลมากจนทำให้หน้าเว็บคุณยาวขึ้น ผมเสนอแนะวิธีการใช้งาน Pagination หรือการแบ่งหน้า เช่นกรณีมีข้อมูล 100 แถว ให้แบ่งหน้าเหลือเพียง 10 แถวต่อ 1 หน้า ทำให้เว็บคุณไม่ยาว และง่ายในการใช้งานอีกด้วย ซึ่งในบทความนี้ ผมจะแนะนำการเขียนโปรแกรม การแบ่งหน้าแบบง่ายและนำไปใช้งานได้จริงด้วย PHP และ MySQLi

Demo : Pagination with php and mysqli

เริ่มต้นให้คุณสร้างฐานข้อมูลชื่อ pagination แล้ว Run query เพื่อเพิ่มตารางในฐานข้อมูล MySQL กันก่อนครับโดย copy code  sql ด้านล่างไปวางใน phpmyadmin ครับ

ดูรูปภาพประกอบด้านล่าง
pagination-01

ทำการสร้างไฟล์ index.php เป็นไฟล์ในการแสดงผล โดยในตัวอย่างผมต้องการแบ่งหน้า หน้าละ 5 แถว (record) สมมุติว่ามี จำนวนข้อมูล 57 แถว ดังนั้นจะมีทั้งหมด 12 หน้าวิธีคำนวณการแบ่งหน้าในตัวอย่างนี้ผมใช้หลักการดังต่อไปนี้
– กรณีมีหน้าทั้งหมด 57 แถวและเราจะทำการแบ่งหน้า หน้าละ 5 แถว ให้นำ จำนวนแบ่งหน้าไปหาร จำนวนทั้งหมดโดยถ้ามีเศษให้ปัดขึ้น ได้เป็น 57/5 = 11.4 ปัดขึ้นเป็น 12
เมื่อเราสร้างไฟล์เสร็จแล้วให้ copy code ด้านล่างไปวางไว้ในไฟล์ index.php

เริ่มต้นการอธิบาย code
pagination-02
การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 12 (ไฮต์ไลท์สีเหลือง) – เชื่อมต่อฐานข้อมูล pagination
บรรทัดที่ 13:18 (กรอบสีแดง หมายเลข 1)  – กำหนดตัวแปร จำนวนแถวข้อมูลต่อหน้าคือ 5 และเช็คว่าหากมีค่าตัวแปร GET[‘page’] ให้เท่ากับตัวแปร GET ไม่มีให้เท่ากับ 1 โดยค่านี้เป็นค่าตัวแปรที่กำหนดว่า เราอยู่หน้าที่เท่าไหร
บรรทัดที่ 20 (กรอบสีแดง หมายเลข 2) – ค่าตัวแปร $start เป็นการกำหนดจุดเริ่มต้นในการค้นหา(select) ข้อมูล โดยเริ่มต้นตำแหน่งแถวที่ 0 เช่น มีทั้งหมด 5 แถว จะนับได้ดังนี้ 0,1,2,3,4 เป็นต้น ดังนั้นตัวแปร start จะคำนวณจาก หน้าที่เราอยู่(หน้าที่เท่าไหร) – 1 * จำนวนแถวข้อมูลต่อหน้า ผมสมมุติว่า ผมอยู่หน้า ที่ 3 แถวข้อมูล แบ่งหน้าละ 5 ดังนั้น จะคำนวณได้ดังนี้ (3-1) * 5 = 10 ฉะนั้นแล้ว ตัวแปร start จะเริ่มที่ 10 ครับ
บรรทัดที่ 22:24 (กรอบสีแดง หมายเลข 3) – เป็นคำสั่งในการค้นหาข้อมูลเฉพาะหน้าที่เราคลิกนั้นเอง สังเกตุได้จากคำสั่ง litmit $start, $perpage หมายถึง เลือกข้อมูลโดยเริ่มที่ $start ถึง $perpage โดยในตัวอย่างนี้อยู่หน้า 3 ดังนั้นจะมีข้อมูลตำแหน่งแถวที่ 10,11,12,13,14

pagination-03
การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 37:43 ในกรอบสีแดงหมายเลข 1 – เป็นการนำข้อมูลมาแสดงผลครับ โดยใช้ query จากคำสั่ง select * from products limit {$start} , {$perpage}
pagination-04
การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 46:51 (กรอบสีแดง หมายเลข 1)  – เป็นการ select ข้อมูลทั้งหมดเพื่อ ให้ตัวแปร $total_page เก็บค่าจำนวนหน้า โดยใช้หลักการ หารปัดเศษโดย เอาจำนวนแถวข้อมูลทั้งหมดหารจำนวนหน้า จากตัวอย่างบทความนี้ จะได้เป็น 23/5 ปัดหารเศษจะได้จำนวนหน้าทั้งหมดคือ 5 หน้าครับ
บรรทัดที่ 55:59 (กรอบสีแดง หมายเลข 2)  – เป็นปุ่มกด ย้อนกลับไปหน้าแรก โดยใส่ลิงค์ page=1 (ให้ค่าตัวแปร $_GET[‘page’] เก็บหมายเลขหน้าที่เราคลิกปัจจุบัน
บรรทัดที่ 60:62 (กรอบสีแดง หมายเลข 3)  – ใช้ code for ในการทำปุ่มซ้ำๆ โดย for ตาม $total_page หรือจำนวนหน้าที่เรามีอยู่(ในตัวอย่างมี 5 หน้า) ดังนั้นจะทำการสร้างปุ่มทั้งหมด 5 ปุ่มครับ
บรรทัดที่ 63:67 (กรอบสีแดง หมายเลข 4)  – เป็นปุ่มกด หน้าสุดท้าย โดยใส่ลิงค์ page=$total_page เหมือนปุ่ม กดย้อนกลับไปหน้าแรก ครับ

หลังจากเราทำเสร็จแล้วดูผลทดสอบครับ

Demo : Pagination with php and mysqli
pagination-05

สำหรับบทความแบ่งหน้าหรือ pagination ผมคิดว่าน่าจะมีการใช้งานบ่อยๆ ดังนั้นอาจจะมีประโยชน์กับเพื่อนๆโปรแกรมเมอร์ หากใครมีไอเดียในการพัฒนาจากที่ผมเขียนสามารถเสนอแนะ แนะนำผมได้ผ่าน Comment ด้านล่างได้ครับ

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
peat
peat
5 years ago

เยี่ยมครับ

momo
5 years ago

ขอบคุณมากๆค่ะ ามานานแล้ว สอนละเอียดและเข้าใจง่ายมาก อขบคุณจริงๆค่ะ

Jojo
Jojo
5 years ago

ขอบคุณครับ

Pooh
Pooh
4 years ago

มันยอดเยี่ยมไปเลยหละ พ่อหนุ่ม

ขอบใจมาก

Pooh
Pooh
4 years ago

มีแบบ Ajax ไหมครับ

บาส
บาส
4 years ago

ถ้าอยากให้เป็นแบบนี้ละครับ <> ถ้าคลิก 16 จะเปลี่ยนเป็น <> ทำยังไงครับ

Tiraphongs.
Tiraphongs.
4 years ago

อยากได้แบบแบ่งหน้า ที่มีข้อมูลเยอะๆ เช่น 1 2 3 4 … 20 21 22 อะคับ ลองหาหลายที่ละคับ แต่ยังไม่ได้สักที

Yothsathon
Yothsathon
3 years ago

พี่ครับ ถ้าในกรณีที่ดึงข้อมูลจากฐานข้อมูลมาแสดงในตารางแต่ข้อมูลมันมีแยอะแล้วต้องการตัดข้อความที่แสดงให้แสดงแค่50ตัวอักษร ต้องเขียนโค้ดเพิ่มยังไงครับ
โค้ดตัวที่ดึงข้อมูลมาแสดงครับ
research_Abtract);
?>

ake
ake
2 years ago

ยอดเยี่ยมครับ
โค้ดอ่านง่ายมาก
ดูเวปอื่นโค้ดลกไปหมด อ่านไม่เค้าใจ มาที่นี่นำไปใช้ได้จริง
ขอบพระคุณอาจาร์ยมากครับ
รักษาสุขภาพนะครับ

wave
wave
1 year ago

สอนได้เยี่ยมเลยครับ