Xem bài viết Phân trang PHP bằng Ajax jQuery hoàn chỉnh

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

Nov 05, 2012Php & MySQL
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo ở tr để biết mình sẽ làm gì nhé.
Đầ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:

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ẻ:
 $(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.
	// PHƯƠNG THỨC SHOW HÌNH LOADING
    function loading_show(){
        $('#loading').html('<img src="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.
	// 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.
	// 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:
$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:
// 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 .= "
  • " . $row['id'] . " " . $row['msg'] . "
  • "; } // ĐƯA KẾT QUẢ VÀO PHƯƠNG THỨC LOAD() TRONG LỚP PAGING_AJAX $paging->data = "
      " . $message . "
    "; // Content for Data echo $paging->Load(); // KẾT QUẢ TRẢ VỀ }

    5. FILE css.css

    File này dùng định dạng cho trang, phần đầu sẽ là reset style cho trình duyệt.
    	@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:
    	
    	/*============== ĐỊ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é :)
    	
    	<link href="http://2cweb.vn/templates/public/web2c/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="http://2cweb.vn/templates/public/web2c/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 viết 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, xin cảm ơn!

    Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

    Nguồn: 2Cweb.vn

     

    Leave a Comments