บทความนี้เป็นตัวอย่างการนำ Codeigniter มาสร้าง Ajax Pagination ด้วย JQuery โดยผมดัดแปลงจากโค้ดของเว็บนี้ http://superdit.com/2011/11/22/simple-ajax-pagination-with-jquery-and-codeigniter/
ฐานข้อมูลตัวอย่าง
CREATE TABLE `tbl_word` (
`word_id` int(11) unsigned NOT NULL auto_increment,
`word` varchar(100) collate utf8_unicode_ci default NULL,
PRIMARY KEY (`word_id`)
) ENGINE=MyISAM AUTO_INCREMENT=1943 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `tbl_word` VALUES ('1', 'กิน');
INSERT INTO `tbl_word` VALUES ('2', 'รับประทาน');
INSERT INTO `tbl_word` VALUES ('3', 'ทาน');
INSERT INTO `tbl_word` VALUES ('5', 'ซุปเบอร์มาเก็ต');
INSERT INTO `tbl_word` VALUES ('6', 'แหล่งจำหน่าย');
INSERT INTO `tbl_word` VALUES ('7', 'ไม่รู้');
INSERT INTO `tbl_word` VALUES ('8', 'ไม่ทราบ');
INSERT INTO `tbl_word` VALUES ('9', 'มา');
INSERT INTO `tbl_word` VALUES ('10', 'เข้ามา');
INSERT INTO `tbl_word` VALUES ('11', 'ก้าวมา');
INSERT INTO `tbl_word` VALUES ('12', 'ก้าว');
INSERT INTO `tbl_word` VALUES ('13', 'ตลาดสด');
INSERT INTO `tbl_word` VALUES ('14', 'ล้ำมา');
INSERT INTO `tbl_word` VALUES ('15', 'ปป');
INSERT INTO `tbl_word` VALUES ('16', 'ผู้อำนวยการ');
INSERT INTO `tbl_word` VALUES ('17', 'ผู้ก่อตั้ง');
INSERT INTO `tbl_word` VALUES ('18', 'ผู้ดูแล');
INSERT INTO `tbl_word` VALUES ('19', 'กรรมการ');
INSERT INTO `tbl_word` VALUES ('20', 'กรรมการผู้ก่อตั้ง');
INSERT INTO `tbl_word` VALUES ('21', 'ผู้จัดการใหญ่');
INSERT INTO `tbl_word` VALUES ('22', 'โดน');
INSERT INTO `tbl_word` VALUES ('23', 'ถูก');
INSERT INTO `tbl_word` VALUES ('24', 'เคียงข้าง');
INSERT INTO `tbl_word` VALUES ('25', 'อยู่คู่');
INSERT INTO `tbl_word` VALUES ('26', 'คู่');
INSERT INTO `tbl_word` VALUES ('27', 'สโมสร');
INSERT INTO `tbl_word` VALUES ('28', 'ทีม');
INSERT INTO `tbl_word` VALUES ('29', 'คลับ');
INSERT INTO `tbl_word` VALUES ('30', 'กลุ่ม');
INSERT INTO `tbl_word` VALUES ('31', 'สมาพันธ์');
INSERT INTO `tbl_word` VALUES ('32', 'แฟน');
INSERT INTO `tbl_word` VALUES ('33', 'คนรัก');
INSERT INTO `tbl_word` VALUES ('34', 'ผู้คลั่งไคล้');
INSERT INTO `tbl_word` VALUES ('35', 'กล่าว');
INSERT INTO `tbl_word` VALUES ('36', 'พูด');
INSERT INTO `tbl_word` VALUES ('37', 'บอก');
INSERT INTO `tbl_word` VALUES ('38', 'เขา');
INSERT INTO `tbl_word` VALUES ('39', 'พวกเขา');
INSERT INTO `tbl_word` VALUES ('40', 'นาย');
INSERT INTO `tbl_word` VALUES ('41', 'คุณ');
INSERT INTO `tbl_word` VALUES ('42', 'พวกคุณ');
INSERT INTO `tbl_word` VALUES ('43', 'พวกนาย');
INSERT INTO `tbl_word` VALUES ('44', 'ยอมรับ');
INSERT INTO `tbl_word` VALUES ('45', 'นับถือ');
INSERT INTO `tbl_word` VALUES ('46', 'ไว้ใจ');
INSERT INTO `tbl_word` VALUES ('47', 'ชื่นชม');
INSERT INTO `tbl_word` VALUES ('48', 'ผม');
INSERT INTO `tbl_word` VALUES ('49', 'เรา');
INSERT INTO `tbl_word` VALUES ('50', 'ข้าพเจ้า');
Controller
<?php
class Word extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('word_model');
$this->load->helper('url');
$this->load->library('pagination');
}
function index($start=0)
{
$config['base_url'] = site_url('word/index');
$config['total_rows'] = $this->word_model->select_total_rows();
$config['per_page'] = 5;
$config['full_tag_open'] = '<div id="pagination">';
$config['full_tag_close'] = '</div>';
$start_row = ($start==0)?5:$config['per_page'];
$per_page = ($start==0)?0:$start;
//+ Data
$data['rs_word'] = $this->word_model->select_all($start_row , $per_page);
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
if ($this->input->post('ajax')) {
$this->load->view('word/ajax_index', $data);
} else {
$this->load->view('word/index', $data);
}
}
}
Model
<?php
class Word_model extends CI_Model {
function __construct()
{
parent::__construct();
}
function select_total_rows(){
$this->db->select('*');
$this->db->from('tbl_word');
return $this->db->get()->num_rows();
}
function select_all($start_row, $total_rows){
$this->db->select('*');
$this->db->from('tbl_word');
$this->db->limit($start_row, $total_rows);
return $this->db->get();
}
}
View ประกอบด้วย 2 ไฟล์
1. index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodeIgniter Ajax Jquery Pagination</title>
</head>
<script src="<?php echo base_url(); ?>/js/jquery-1.7.1.min.js"></script>
<script>
$(function() {
applyPagination();
function applyPagination() {
$("#ajax_paging a").click(function() {
var url = $(this).attr("href");
$.ajax({
type: "POST",
data: "ajax=1",
url: url,
beforeSend: function() {
$("#content").html("");
},
success: function(msg) {
$("#content").html(msg);
applyPagination();
}
});
return false;
});
}
});
</script>
<style>
#pagination{
margin:5px;
}
#pagination a, #pagination strong {
background: #FFF;
padding: 1px 5px;
text-decoration: none;
border: 1px solid #0F6059;
color: #0F6059;
font-size: 13px;
}
#pagination strong, #pagination a:hover {
font-weight: normal;
background: #cac9c9;
color:#0F6059;
}
/*pagination*/
</style>
</header>
<body>
<div id="content">
<div id="data">
<?php foreach($rs_word->result() as $row_word): ?>
<div><?php echo $row_word->word; ?></div>
<?php endforeach; ?>
</div>
<div id="ajax_paging">
<?php echo $pagination; ?>
</div>
</div>
</body>
</html>
2. ajax_index.php
<div id="data">
<?php foreach($rs_word->result() as $row_word): ?>
<div><?php echo $row_word->word; ?></div>
<?php endforeach; ?>
</div>
<div id="ajax_paging">
<?php echo $pagination; ?>
</div>
หน้าตาก็จะออกมาประมาณนี้ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น