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

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

การแบ่งหน้าเพจจากฐานข้อมูลที่มีหลาย record ให้เป็นหน้าเพจที่มีปริมาณข้อมูลเท่ากันหรือใกล้เคียงกัน เราเรียกว่าการทำ pagination ระบบ pagination ถูกพัฒนาไว้ทั้งในส่วน backend คือ codeigniter framework และในส่วน frontend คือ bootstrap framework ก็มีระบบ pagination ให้เราสามารถใช้งานด้วยเช่นกัน บทความนี้เราจะมาเริ่มใช้งานระบบ pagination ร่วมกันระหว่าง codeigniter และ bootstrap

สร้างตารางฐานข้อมูล

เริ่มต้น ให้เราทำการสร้างตารางฐานข้อมูล โดยให้มีโครงสร้างที่สามารถนำไปแบ่งเป็นหน้าเพจได้ เพื่อใช้สำหรับการทดสอบ ในบทความนี้จะยกตัวอย่างตารางโดยตั้งชื่อว่า apps_member และเก็บข้อมูล field ต่าง ๆ ดังนี้





เมื่อได้ตาราง apps_member เรียบร้อยแล้วให้สร้างข้อมูลแบบ manual โดยเลือกไปที่เมนู insert ใน phpmyadmin เพิ่มข้อมูลให้มากพอสำหรับการทดสอบการแบ่งหน้า

รูปแบบการ query ข้อมูล

ให้สร้างไฟล์ model ตั้งชื่อว่า model_page และสร้างเมธอดสำหรับคิวรี่ข้อมูล โดยเราสามารถเขียนคำสั่งได้ดังนี้

public function getAllData() // ไว้สำหรับนับข้อมูลทั้งหมด total_rows
{ 
	$query = $this->db->query('SELECT * FROM apps_member'); 
	return $query->num_rows();
}
public function getPageData($page,$per_page) // ไว้สำหรับดึงข้อมูลหน้านั้น ๆ 
{ 
	$query = $this->db->query('SELECT * FROM apps_member ORDER BY timestamp DESC LIMIT '.$page.','.$per_page); 
	if($query->num_rows() > 0 ) {
		return $query->result();
	} else {
		return array();
	}
}

• พารามิเตอร์ตัวแรกคือ $page หมายถึง เลขหน้าเพจที่เราจำเป็นต้องส่งเข้ามาเพื่อกำหนดตำแหน่งเริ่มต้นของ record
• พารามิเตอร์ตัวที่สอง คือ $per_page หมายถึง จำนวนของ record ที่เราต้องการให้แสดงต่อหน้า

การตั้งค่าและใช้งานใน controller

จาก 2 หัวข้อด้านบนเราได้เตรียมฐานข้อมูลและ model สำหรับคิวรี่ข้อมูลเรียบร้อยแล้วต่อไปคือการเรียกใช้งานและตั้งค่าระบบ pagination ในส่วนของ controller ดังนั้นให้เราสร้างไฟล์ controller และตั้งชื่อว่า Home.php และสร้างเมธอดชื่อว่า member ไว้สำหรับแสดงรายชื่อสมาชิก ซึ่งจะมีรูปแบบเขียนและการเรียกใช้งานดังนี้

class Home extends CI_Controller {
	
	public $PAGE;
	public function __construct()
	{
		parent::__construct();
		$this->load->library('pagination');
		$this->load->model('model_page');
	
	}
	public function member()
	{
		$per_page = 20;
		$page = ($this->uri->segment(2) != '')?$this->uri->segment(2):0; // เลขหน้าที่จะถูกส่งมาเช่น home/member/3
		$this->load->library('pagination'); // โหลด pagination library
		$config['base_url'] = base_url("home/member"); // ชี้หน้าเพจหลักที่จะใช้งานมาที่ home/member
		$config['total_rows'] = $this->model_page->getAllData(); // จำนวนข้อมูลทั้งหมด
		$config['per_page'] = $per_page; // จำนวนข้อมูลต่อหน้า
		
		$config['use_page_numbers'] = TRUE; // เพื่อให้เลขหน้าในลิงค์ถูกต้อง ให้เซตค่าส่วนนี้เป็น TRUE
		
		$this->pagination->initialize($config);
		$this->PAGE['member_list'] = $this->model_page->getPageData($page,$per_page); // รายชื่อสมาชิกที่จะนำไปแสดงในหน้านั้น
		$this->PAGE['pagination'] = $this->pagination->create_links(); // เลขหน้า
		$this->load->view('member_view',$this->PAGE); // ส่งข้อมูลออกไปที่ member_veiw
	}
}

ใช้งาน bootstrap pagination

ถ้าเราต้องการใช้งาน pagination ที่เป็นเทมเพลตของ bootstrap สามารถทำได้โดยการเพิ่ม config เข้าไปในส่วนของ Home Controller ก่อนการ initialize ดังนี้ครับ

$config['full_tag_open'] = '<ul class="pagination">';
$config['full_tag_close'] = '</ul>';
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = '&laquo';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '&raquo';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';

แสดง Page Number ในส่วนของ View

ขั้นตอนสุดท้ายในหน้า member_view นอกจากการนำข้อมูลไปแสดงเป็นลิสต์ให้สวยงามแล้ว เราต้องทำการ echo ข้อมูลส่วน pagination เพื่อแสดงเลขหน้าด้วยนะครับ สามารถเขียนโค๊ดได้ดังนี้ครับ

<div class="col-md-12" style="text-align:center;"><?php echo $pagination; ?></div>

ตัวแปร $pagination คือตัวแปรที่ส่งออกมาจากา Home Controller