Các bước thực hiện:
1. Tạo database trong phpmyadmin với tên "chiarang" ( có thể khác, tùy bạn, nếu khác bạn nên thay đôi dataname trong file "connec.php" để có thể kết nối đến database trên server ).
2. Trong database " chiatrang ", tạo một table với tên "paging", có nội dung như sau:
create table paging (
id int(10) not null AUTO_INCREMENT,
msg varchar(500) not null,
PRIMARY KEY (id)
);
3. Trong thư mục webroot tạo thư mục "chiatrang" .
4. Trong thư mục "chiatrang" vừa tạo, tạo các file : index.php, insert_data.php, load_data.php, connec.php, paging_ajax.php ; tạo thư mục js chứa 2 file : layout.css , paging.js ; tạo thư mục images chứa 2 file ảnh . Cấu trúc thư mục như sau :
-chiatrang
------------index.php
------------insert_data.php
------------load_data.php
------------connec.php
------------paging_ajax.php
------------js
-----------------------------layout.css
-----------------------------paging.js
------------images
----------------------------- 2 file ảnh
a . File "index.php" có nội dung như sau :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phân trang PHP bằng Ajax jQuery hoàn chỉnh</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="js/layout.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
</head>
<body>
<div align="center" ><h1>Phần nội dung hiển thị trên trang </h1></div>
<div id="loading"></div>
<div id="container" style="margin-bottom:100px">
<div class="data"></div>
<div class="pagination"></div>
</div>
<div align="center" ><h1> Phần nhập nội dung cho trang </h1></div>
<form action="" method="post">
<textarea rows="15" cols="60" type="text" required="required" name="chenvao"></textarea>
<input type="submit" name="ok" value="Submit" >
</form>
</body>
</html>
<?php
include "insert_data.php";
?>
b. File "insert_data.php" có nội dung như sau :
<?php
$chen="";
include "connec.php";
if ( isset($_POST['ok']) ){
if(isset($_POST['chenvao'])!= NULL) {
$chen = addslashes( $_POST['chenvao'] );
$sql_query = @mysql_query("SELECT msg FROM paging WHERE msg='{$chen}'");
// Nếu msg này không tồn tại thì insert data
if ( @mysql_num_rows( $sql_query ) <= 0 ){
mysql_query("INSERT INTO paging (msg) VALUES ('{$chen}')");
}
else {
require_once "index.php";
}
}
else {
require_once "index.php";
}
}
?>
c. File "load_data.php" có nội dung như sau:
<?php
// KIỂM TRA TỒN TẠI PAGE HAY KHÔNG
if(isset($_POST["page"]))
{
// ĐƯA 2 FILE VÀO TRANG & KHỞI TẠO CLASS
include "connec.php";
require_once "paging_ajax.php";
$paging = new paging_ajax();
// ĐẶT CLASS CHO THÀNH PHẦN PHÂN TRANG THEO Ý MUỐN
$paging->class_pagination = "pagination";
$paging->class_active = "active";
$paging->class_inactive = "inactive";
$paging->class_go_button = "go_button";
$paging->class_text_total = "total";
$paging->class_txt_goto = "txt_go_button";
// SỐ PHẦN TỬ TRÊN 1 TRANG , CÓ NGHĨA LÀ SỐ DÒNG TRONG BẢNG CSDL
$paging->per_page = 5;
// LẤY GIÁ TRỊ PAGE THÔNG QUA PHƯƠNG THỨC POST
$paging->page = $_POST["page"];
// VIẾT CÂU TRUY VẤN & LẤY KẾT QUẢ TRẢ VỀ
$paging->text_sql = "SELECT id,msg FROM paging";
$result_pag_data = $paging->GetResult();
// BIẾN CHỨA KẾT QUẢ TRẢ VỀ
$message = "";
// DUYỆT MẢNG LẤY KẾT QUẢ
while ($row = mysql_fetch_array($result_pag_data)) {
$message .= "<li><strong>" . $row['id'] . "</strong> ".">. ". $row['msg'] . "</li>";
echo "</br>";
}
// ĐƯA KẾT QUẢ VÀO PHƯƠNG THỨC LOAD() TRONG LỚP PAGING_AJAX
$paging->data = "<div class='data'><ul>" . $message . "</ul></div>"; // Content for Data
echo $paging->Load(); // KẾT QUẢ TRẢ VỀ
}
d. File "connec.php" có nội dung như sau :
<?php
$mysql_hostname = "localhost"; // host MySQL
$mysql_user = "root"; // username MySQL
$mysql_password = "huy"; // password MySQL
$mysql_database = "chiatrang"; // database name
// KẾT NỐI & CHỌN DATABASE
$db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("CAN NOT CONNECT DATABASE");
mysql_select_db($mysql_database, $db) or die("CAN NOT SELECT DATABASE");
// THIẾT LẬP UTF8 CHO DB
mysql_query("SET NAMES 'utf8'", $db);
/* mysql_set_charset('utf8',$db); */
?>
e. File "paging_ajax.php" có nội dung như sau:
<?php
class paging_ajax
{
public $data; // DATA
public $per_page = 5; // SỐ RECORD TRÊN 1 TRANG
public $page; // SỐ PAGE
public $text_sql; // CÂU TRUY VẤN
// THÔNG SỐ SHOW HAY HIDE
public $show_pagination = true;
public $show_goto = false;
public $show_total = true;
// TÊN CÁC CLASS
public $class_pagination;
public $class_active;
public $class_inactive;
public $class_go_button;
public $class_text_total;
public $class_txt_goto;
private $cur_page; // PAGE HIỆN TẠI
private $num_row; // SỐ RECORD
// PHƯƠNG THỨC LẤY KẾT QUẢ CỦA TRANG
public function GetResult()
{
global $db; // BIỀN $db TOÀN CỤC
// TÌNH TOÁN THÔNG SỐ LẤY KẾT QUẢ
$this->cur_page = $this->page;
$this->page -= 1;
$this->per_page = $this->per_page;
$start = $this->page * $this->per_page;
// TÍNH TỔNG RECORD TRONG BẢNG
$result = mysql_query($this->text_sql);
$this->num_row = mysql_num_rows($result);
// LẤY KẾT QUẢ TRANG HIỆN TẠI
return mysql_query($this->text_sql." LIMIT $start, $this->per_page");
}
// PHƯƠNG THỨC XỬ LÝ KẾT QUẢ VÀ HIỂN THỊ PHÂN TRANG
public function Load()
{
// KHÔNG PHÂN TRANG THÌ TRẢ KẾT QUẢ VỀ
if(!$this->show_pagination)
return $this->data;
// SHOW CÁC NÚT NEXT, PREVIOUS, FIRST & LAST
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
// GÁN DATA CHO CHUỖI KẾT QUẢ TRẢ VỀ
$msg = $this->data;
// TÍNH SỐ TRANG
$count = $this->num_row;
$no_of_paginations = ceil($count / $this->per_page);
// TÍNH TOÁN GIÁ TRỊ BẮT ĐẦU & KẾT THÚC VÒNG LẶP
if ($this->cur_page >= 7) {
$start_loop = $this->cur_page - 3;
if ($no_of_paginations > $this->cur_page + 3)
$end_loop = $this->cur_page + 3;
else if ($this->cur_page <= $no_of_paginations && $this->cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
// NỐI THÊM VÀO CHUỖI KẾT QUẢ & HIỂN THỊ NÚT FIRST
$msg .= "<div class='$this->class_pagination'><ul>";
if ($first_btn && $this->cur_page > 1) {
$msg .= "<li p='1' class='active'>Đầu</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='$this->class_inactive'>Đầu</li>";
}
// HIỂN THỊ NÚT PREVIOUS
if ($previous_btn && $this->cur_page > 1) {
$pre = $this->cur_page - 1;
$msg .= "<li p='$pre' class='active'>Trước</li>";
} else if ($previous_btn) {
$msg .= "<li class='$this->class_inactive'>Cuối</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($this->cur_page == $i)
$msg .= "<li p='$i' class='actived'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
// HIỂN THỊ NÚT NEXT
if ($next_btn && $this->cur_page < $no_of_paginations) {
$nex = $this->cur_page + 1;
$msg .= "<li p='$nex' class='active'>Sau</li>";
} else if ($next_btn) {
$msg .= "<li class='$this->class_inactive'>Sau</li>";
}
// HIỂN THỊ NÚT LAST
if ($last_btn && $this->cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='$this->class_active'>Cuối</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='$this->class_inactive'>Cuối</li>";
}
// SHOW TEXTBOX ĐỂ NHẬP PAGE KO ?
if($this->show_goto)
$goto = "<input type='text' id='goto' class='$this->class_txt_goto' size='1' style='margin-top:-1px;margin-left:40px;margin-right:10px'/><input type='button' id='go_btn' class='$this->class_go_button' value='Đến'/>";
if($this->show_total)
$total_string = "<span id='total' class='$this->class_text_total' a='$no_of_paginations'>Trang <b>" . $this->cur_page . "</b>/<b>$no_of_paginations</b></span>";
$stradd = $goto . $total_string;
// TRẢ KẾT QUẢ TRỞ VỀ
return $msg . "</ul>" . $stradd . "</div>"; // Content for pagination
}
}
?>
f. File "layout.css" có nội dung như sau :
@CHARSET "ISO-8859-1";
/*============== STYLE FOR PAGE ==============*/
*{margin:0px; padding:0px;}
body{
width: 500px; background: #000;
margin: 0 auto; padding: 0;
}
h1{color:#DB2E66; margin:20px 0px;}
#loading{ width: 300px; position: absolute; top: 80px; right:160px;}
/*============== STYLE FOR PAGING ==============*/
#container .pagination ul li.active,
#container .pagination ul li.inactive:hover{
background-color: #DB2E66; color:#fff;
border:1px solid #DB2E66; cursor: default;
}
#container .pagination ul li.inactive{
background-color: #000; color: #DB2E66;
border: 1px solid #eaeaea; cursor: default;
}
#container .pagination ul li.actived{color:#DB2E66;background-color:#fff; border:1px solid #fff;}
#container .data ul li{
list-style: none;
margin: 5px 0; color: #fff;
font:normal 13px verdana;
}
#container .pagination{ width: 550px; height: 25px; margin-top:20px;}
#container .pagination ul li{
list-style: none;
float: left; margin: 0 3px;
border: 1px solid #eaeaea;
padding: 2px 6px 2px 6px;
font: bold 14px arial;
background-color: #000; color: #DB2E66;
}
#container .pagination ul li:hover{
background-color: #DB2E66;
border: 1px solid #DB2E66;
cursor: pointer; color: #fff;
}
.go_button{
background-color:#DB2E66;
border:1px solid #fff;
color:#cc0000;padding:2px 6px;
cursor:pointer;position:absolute;margin-top:-1px;
}
.total{ float:right;font-family:arial;color:#999; }
g. File "paging.js" có nội dung như sau :
$(document).ready(function(){
// PHƯƠNG THỨC SHOW HÌNH LOADING
function loading_show(){
$('#loading').html("<img src='images/image-loading-animation.gif'/>").fadeIn('fast');
}
// PHƯƠNG THỨC ẨN HÌNH LOADING
function loading_hide(){
$('#loading').fadeOut('fast');
}
// PHƯƠNG THỨC LOAD KẾT QUẢ
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
// LOAD GIÁ TRỊ MẶC ĐỊNH PAGE = 1 CHO LẦN ĐẦU TIÊN
loadData(1);
// LOAD KẾT QUẢ CHO TRANG
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
// PHƯƠNG THỨC DÙNG ĐỂ HIỆN KẾT QUẢ KHI NHẬP GIÁ TRỊ PAGE VÀO TEXTBOX
// BẠN CÓ THỂ MỞ TEXTBOX LÊN TRONG CLASS PHÂN TRANG
$('#go_btn').live('click',function(){
var page = parseInt($('#goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('HÃY NHẬP GIÁ TRỊ TỪ 1 ĐẾN '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
h. Hai file ảnh :
5. Video demo :
6. Link tải file :
0 nhận xét:
Đăng nhận xét