Site icon บริษัท โค๊ดบี จำกัด

สอน codeigniter วิธีใช้ pagination ร่วมกับ bootstrap

codebee
php-codeigniter-framework

php-codeigniter-framework

<h3>สอน codeigniter วิธีใช้ pagination ร่วมกับ bootstrap<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;การแบ่งหน้าเพจจากฐานข้อมูลที่มีหลาย record ให้เป็นหน้าเพจที่มีปริมาณข้อมูลเท่ากันหรือใกล้เคียงกัน เราเรียกว่าการทำ pagination ระบบ pagination ถูกพัฒนาไว้ทั้งในส่วน backend คือ codeigniter framework และในส่วน frontend คือ bootstrap framework ก็มีระบบ pagination ให้เราสามารถใช้งานด้วยเช่นกัน บทความนี้เราจะมาเริ่มใช้งานระบบ pagination ร่วมกันระหว่าง codeigniter และ bootstrap <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างตารางฐานข้อมูล<&sol;h4>&NewLine;<p>เริ่มต้น ให้เราทำการสร้างตารางฐานข้อมูล โดยให้มีโครงสร้างที่สามารถนำไปแบ่งเป็นหน้าเพจได้ เพื่อใช้สำหรับการทดสอบ ในบทความนี้จะยกตัวอย่างตารางโดยตั้งชื่อว่า apps&lowbar;member และเก็บข้อมูล field ต่าง ๆ ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;codeigniter-ใช้งาน-pagination-1&period;png" alt&equals;"codeigniter-ใช้งาน-pagination" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;เมื่อได้ตาราง apps&lowbar;member เรียบร้อยแล้วให้สร้างข้อมูลแบบ manual โดยเลือกไปที่เมนู insert ใน phpmyadmin เพิ่มข้อมูลให้มากพอสำหรับการทดสอบการแบ่งหน้า<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>รูปแบบการ query ข้อมูล<&sol;h4>&NewLine;<p>ให้สร้างไฟล์ model ตั้งชื่อว่า model&lowbar;page และสร้างเมธอดสำหรับคิวรี่ข้อมูล โดยเราสามารถเขียนคำสั่งได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;public function getAllData&lpar;&rpar; &sol;&sol; ไว้สำหรับนับข้อมูลทั้งหมด total&lowbar;rows &NewLine;&lbrace; &NewLine;&Tab;&dollar;query &equals; &dollar;this->db->query&lpar;'SELECT &ast; FROM apps&lowbar;member'&rpar;&semi; &NewLine;&Tab;return &dollar;query->num&lowbar;rows&lpar;&rpar;&semi; &NewLine;&rcub; &NewLine;public function getPageData&lpar;&dollar;page&comma;&dollar;per&lowbar;page&rpar; &sol;&sol; ไว้สำหรับดึงข้อมูลหน้านั้น ๆ &NewLine;&lbrace; &NewLine;&Tab;&dollar;query &equals; &dollar;this-&gt&semi;db-&gt&semi;query&lpar;'SELECT &ast; FROM apps&lowbar;member ORDER BY timestamp DESC LIMIT '&period;&dollar;page&period;'&comma;'&period;&dollar;per&lowbar;page&rpar;&semi; &NewLine;&Tab;if&lpar;&dollar;query-&gt&semi;num&lowbar;rows&lpar;&rpar; &gt&semi; 0 &rpar; &lbrace; &NewLine;&Tab;&Tab;return &dollar;query-&gt&semi;result&lpar;&rpar;&semi; &NewLine;&Tab;&rcub; else &lbrace; &NewLine;&Tab;&Tab;return array&lpar;&rpar;&semi; &NewLine;&Tab;&rcub; &NewLine;&rcub; &NewLine;<&sol;pre>&NewLine;<ul>&NewLine;<li>พารามิเตอร์ตัวแรกคือ &dollar;page หมายถึง เลขหน้าเพจที่เราจำเป็นต้องส่งเข้ามาเพื่อกำหนดตำแหน่งเริ่มต้นของ record<&sol;li>&NewLine;<li>พารามิเตอร์ตัวที่สอง คือ &dollar;per&lowbar;page หมายถึง จำนวนของ record ที่เราต้องการให้แสดงต่อหน้า<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การตั้งค่าและใช้งานใน controller<&sol;h4>&NewLine;<p>จาก 2 หัวข้อด้านบนเราได้เตรียมฐานข้อมูลและ model สำหรับคิวรี่ข้อมูลเรียบร้อยแล้วต่อไปคือการเรียกใช้งานและตั้งค่าระบบ pagination ในส่วนของ controller ดังนั้นให้เราสร้างไฟล์ controller และตั้งชื่อว่า Home&period;php และสร้างเมธอดชื่อว่า member ไว้สำหรับแสดงรายชื่อสมาชิก ซึ่งจะมีรูปแบบเขียนและการเรียกใช้งานดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >class Home extends CI&lowbar;Controller &lbrace; &NewLine;&Tab; &NewLine;&Tab;public &dollar;PAGE&semi; &NewLine;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;parent&colon;&colon;&lowbar;&lowbar;construct&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;library&lpar;'pagination'&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;model&lpar;'model&lowbar;page'&rpar;&semi; &NewLine;&Tab; &NewLine;&Tab;&rcub; &NewLine;&Tab;public function member&lpar;&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;&dollar;per&lowbar;page &equals; 20&semi; &NewLine;&Tab;&Tab;&dollar;page &equals; &lpar;&dollar;this-&gt&semi;uri-&gt&semi;segment&lpar;2&rpar; &excl;&equals; ''&rpar;&quest;&dollar;this-&gt&semi;uri-&gt&semi;segment&lpar;2&rpar;&colon;0&semi; &sol;&sol; เลขหน้าที่จะถูกส่งมาเช่น home&sol;member&sol;3 &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;library&lpar;'pagination'&rpar;&semi; &sol;&sol; โหลด pagination library &NewLine;&Tab;&Tab;&dollar;config&lbrack;'base&lowbar;url'&rsqb; &equals; base&lowbar;url&lpar;"home&sol;member"&rpar;&semi; &sol;&sol; ชี้หน้าเพจหลักที่จะใช้งานมาที่ home&sol;member &NewLine;&Tab;&Tab;&dollar;config&lbrack;'total&lowbar;rows'&rsqb; &equals; &dollar;this-&gt&semi;model&lowbar;page-&gt&semi;getAllData&lpar;&rpar;&semi; &sol;&sol; จำนวนข้อมูลทั้งหมด &NewLine;&Tab;&Tab;&dollar;config&lbrack;'per&lowbar;page'&rsqb; &equals; &dollar;per&lowbar;page&semi; &sol;&sol; จำนวนข้อมูลต่อหน้า &NewLine;&Tab;&Tab; &NewLine;&Tab;&Tab;&dollar;config&lbrack;'use&lowbar;page&lowbar;numbers'&rsqb; &equals; TRUE&semi; &sol;&sol; เพื่อให้เลขหน้าในลิงค์ถูกต้อง ให้เซตค่าส่วนนี้เป็น TRUE &NewLine;&Tab;&Tab; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;pagination-&gt&semi;initialize&lpar;&dollar;config&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;PAGE&lbrack;'member&lowbar;list'&rsqb; &equals; &dollar;this-&gt&semi;model&lowbar;page-&gt&semi;getPageData&lpar;&dollar;page&comma;&dollar;per&lowbar;page&rpar;&semi; &sol;&sol; รายชื่อสมาชิกที่จะนำไปแสดงในหน้านั้น &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;PAGE&lbrack;'pagination'&rsqb; &equals; &dollar;this-&gt&semi;pagination-&gt&semi;create&lowbar;links&lpar;&rpar;&semi; &sol;&sol; เลขหน้า &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;view&lpar;'member&lowbar;view'&comma;&dollar;this-&gt&semi;PAGE&rpar;&semi; &sol;&sol; ส่งข้อมูลออกไปที่ member&lowbar;veiw &NewLine;&Tab;&rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ใช้งาน bootstrap pagination<&sol;h4>&NewLine;<p>ถ้าเราต้องการใช้งาน pagination ที่เป็นเทมเพลตของ bootstrap สามารถทำได้โดยการเพิ่ม config เข้าไปในส่วนของ Home Controller ก่อนการ initialize ดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;config&lbrack;'full&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;ul class&equals;"pagination"&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'full&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;ul&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'first&lowbar;link'&rsqb; &equals; false&semi; &NewLine;&dollar;config&lbrack;'last&lowbar;link'&rsqb; &equals; false&semi; &NewLine;&dollar;config&lbrack;'first&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'first&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'prev&lowbar;link'&rsqb; &equals; '&amp&semi;laquo'&semi; &NewLine;&dollar;config&lbrack;'prev&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li class&equals;"prev"&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'prev&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'next&lowbar;link'&rsqb; &equals; '&amp&semi;raquo'&semi; &NewLine;&dollar;config&lbrack;'next&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'next&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'last&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'last&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'cur&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li class&equals;"active"&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'cur&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'num&lowbar;tag&lowbar;open'&rsqb; &equals; '&lt&semi;li&gt&semi;'&semi; &NewLine;&dollar;config&lbrack;'num&lowbar;tag&lowbar;close'&rsqb; &equals; '&lt&semi;&sol;li&gt&semi;'&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>แสดง Page Number ในส่วนของ View<&sol;h4>&NewLine;<p>ขั้นตอนสุดท้ายในหน้า member&lowbar;view นอกจากการนำข้อมูลไปแสดงเป็นลิสต์ให้สวยงามแล้ว เราต้องทำการ echo ข้อมูลส่วน pagination เพื่อแสดงเลขหน้าด้วยนะครับ สามารถเขียนโค๊ดได้ดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"col-md-12" style&equals;"text-align&colon;center&semi;"&gt&semi;&lt&semi;&quest;php echo &dollar;pagination&semi; &quest;&gt&semi;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p>ตัวแปร &dollar;pagination คือตัวแปรที่ส่งออกมาจากา Home Controller<&sol;p>&NewLine;

Exit mobile version