Home »

Phân trang PHP bằng Ajax jQuery hoàn chỉnh

10 thg 9, 2013

Bài viết hôm nay 2Cwebvn xin gởi đến các bạn cách phân trang PHP bằng Ajax jQuery hoàn chỉnh, từ đó các bạn có thể tham khảo và áp dụng vào các dự án của mình. Đây cũng là yêu cầu của một bạn đã gởi qua mail cho mình khoảng tuần trước mà giờ mới có thời gian viết bài.


Phân trang PHP bằng Ajax jQuery hoàn chỉnh

Bài viết hôm nay 2Cwebvn xin gởi đến các bạn cách phân trang PHP bằng Ajax jQuery hoàn chỉnh, từ đó các bạn có thể tham khảo và áp dụng vào các dự án của mình. Đây cũng là yêu cầu của một bạn đã gởi qua mail cho mình khoảng tuần trước mà giờ mới có thời gian viết bài.
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo để biết mình sẽ làm gì nhé.
demo

 download

Đầu tiên thì mình cùng tìm hiểu các file chạy trong bài này nhé:
index.php: file chạy chính của chương trình.
paging.js: file js này để xử lý phân trang trong file index.php .
load_data.php: file này dùng để xử lý và trả kết quả phân trang trở về.
db.php: file này dùng kết nối đến cơ sở dữ liệu.
paging_ajax.php: file chứa class phân trang, chứa 2 hàm dùng để load và hiển thị phân trang.
css.css: file này dùng để định dạng style cho trang.
Giờ mình sẽ đi qua từng nội dung của từng file để biết chúng code thế nào nhé.
1. FILE CHẠY CHÍNH index.php
Trang này chủ yếu là hiển thị phần phân trang sau khi xử lý ajax, nội dung file như sau:
?
source code
1
2
3
4
5
<div id="loading"></div>
<div id="container" style="margin-bottom:100px">
<div class="data"></div>
<div class="pagination"></div>
</div>

2. FILE paging.js
File này xử lý ajax và trả kết quả phân trang để hiển thị trong file index.php. File này được chạy khi chạy chương trình nên phải viết trong cặp thẻ:
?
1
2
3
$(document).ready(function(){
//.....nội dung file
});
Đầu tiên là hai phương thức dùng để show và hide hình ảnh loading cho phần phân trang.
?
source code
1
2
3
4
5
6
7
8
// 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');
}

Tiếp theo là phương thức load kết quả và gọi phương thức đó với giá trị mặc định là = 1 cho lần đầu tiên load.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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);
Cuối cùng là xử lý 2 sự kiện khi click các trang.
?
1
2
3
4
5
6
7
8
9
10
11
// 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;="" }="" });="">
3. FILE db.php
File này dùng kết nối cơ sở dữ liệu, nội dung đơn giản như sau:
?
1
2
3
4
5
6
7
8
9
10
$mysql_hostname = "localhost";      // host MySQL
$mysql_user = "root";               // username MySQL
$mysql_password = "";               // password MySQL
$mysql_database = "2cwebvn_demo";   // 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); */
4. FILE load_data.php
File này có nhiệm vụ xử lý phân trang, sau đó trả kết quả trở về cho người dùng. File này viết ngắn gọn, mình có chú thích như sau:
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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 "db.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";
// KHỞI TẠO SỐ PHẦN TỬ TRÊN TRANG
$paging->per_page = 10; 
// 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>";
}
// ĐƯ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Ề
}


5. FILE css.css
File này dùng định dạnh cho trang, phần đầu sẽ là reset style cho trình duyệt
?
source code
1
2
3
4
5
6
7
8
9
@CHARSET "ISO-8859-1";
/*============== RESET STYLE CHO TRÌNH DUYỆT ==============*/
*{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;}
Tiếp theo sẽ là định dạng cho phần phân trang như sau:
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*============== ĐỊNH DẠNG PHẦN PHÂN TRANG ==============*/
#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; }

6. FILE paging_ajax.php
Đây là class phân trang ajax, trong class này chứa 2 phương thức là GetResult() và Load(). Như tên của hương thức GetResult() thì phương thức này dùng để load dữ liệu đúng theo từng trang được click bởi người dùng. Phương thức Load() thì dùng để xử lý, trình bày dữ liệu, sau đó trả dữ liệu cho file load_data.php và file load_data.php sẽ trả dữ liệu cho file chạy chính của mình là file index.php
File paging_ajax.php khá dài, để xem chi tiết thì bạn download source về xem nhé. Trong file này mình cũng đã có chú thích hết cho các bạn, nếu có thắc mắc nào thì cứ để comment phía dưới bài viết này.
Cuối cùng thì đừng quên thêm file cần thiết cũng như thư viện jQuery vào nhé :)
?
source code
1
2
3
<link href="js/css.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>

Và đây là kết quả sau khi làm xong.
Phân trang PHP bằng Ajax jQuery hoàn chỉnh - 2Cwebvn
Chúc các bạn thành công và làm được cho mình phần phân trang theo ý mình muốn.
Kết luận
Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, 2Cweb.vn xin cảm ơn!
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét