Share Code phân trang bằng Ajax đơn giản

[Smobi]

Như chúng ta đã biết cái ưu điểm của Ajax là xử lý bất đồng bộ , nó không làm trang web của chúng ta phải load lại toàn bộ mà chỉ load lại ở 1 bộ phận nào đó mà chúng ta xử lý . Hôm nay , mình xin ứng dụng lại những gì đã học từ Thầy và viết code đơn giản . Có gì sai sót các bạn góp ý dùm mình .
Tut của mình chỉ đơn giản gồm có 1 combo box để chúng ta chọn thể loại . Sau khi chọn thể loại thì sẽ đổ dữ liệu trong thể loại đó ra kèm theo phân trang . Ở đây mình chưa phân nhóm , các bạn có thể góp ý xây dựng hoàn chỉnh để phân trang và phân nhóm cho hoàn chỉnh nha . Sau đây là các bước thực hiện :

Đầu tiên chúng ta tạo 1 trang có tên là theloai.php . Trong trang này là 1 form để chúng ta chọn thể loại từ cơ sở dữ liệu . Sau đó tạo 1 trang ajax.js và 1 trang process.php để xử lý như trong code bên dưới .

Các bạn tham khảo code đầy đủ ở dưới nha .

Cấu trúc thư mục như sau :
folder : includes/ : trong folder này chứa file config.php chứa các thông số cấu hình
Code :

<?php 
    $host = "localhost"; 
    $user_host = "root"; 
    $pass_host = "root"; 
    $db_name = "tintuc"; 
     
    $link = mysql_connect($host,$user_host,$pass_host) or die("can not connect host"); 
    mysql_select_db($db_name,$link) or die("can not connect database"); 
     
?>

folder data/ : chứa image của tin tức

file : theloai.php
Code :

<script language="javascript" src="ajax.js"></script> 
<select size="1" name="tl" class="title" onchange="if(this.value!=0){javascript:loadXMLDoc(this.value,1);}"> 
    <option value="0">--Chọn thể loại--</option> 
    <?php 
        require_once("includes/config.php"); 
        $sql = "select * from theloai"; 
        $result = mysql_query($sql); 
        while($data = mysql_fetch_array($result)){ 
            echo "<option value='$data[idTL]'>$data[TenTL]</option>";     
        } 
    ?> 
</select> 
<div id="ketqua"></div>

file ajax.js :

// JavaScript Document 
function obj(){ 
    td = navigator.appName; 
    if(td == "Microsoft Internet Explorer"){ 
        dd = new ActiveXObject("Microsoft.XMLHTTP");     
    }else{ 
        dd = new XMLHttpRequest();     
    } 
    return dd; 
} 

http = obj(); 

function loadXMLDoc(id,p){ 
    document.getElementById("ketqua").innerHTML = "Đang xử lý..."; 
    url = "process.php?id="+id+"&page="+p; 
    http.open("get",url,true); 
    http.onreadystatechange=process; 
    http.send(null);     
} 

function process(){ 
    if(http.readyState == 4 && http.status == 200){ 
        document.getElementById("ketqua").innerHTML = http.responseText;     
    } 
}

file proccess.php
code :

<?php 
    $id = $_GET['id']; 
    $page = $_GET['page']; 
    require_once("includes/config.php"); 
    $sql = "select * from tin where idTL=$id"; 
    $result = mysql_query($sql); 
    $tongsorecord = mysql_num_rows($result); 
    $y = 1; 
    $start = ($page-1)*$y; 
    $tongsotrang = ceil($tongsorecord/$y); 
    if($tongsorecord == 0){ 
        echo "Không có tin nào";     
    }else{ 
    ?> 
    <script language="javascript" src="ajax.js"></script> 
        <table align="center"> 
            <tr> 
                <td class="title">STT</td> 
                <td class="title">Tiêu đề</td> 
                <td class="title">Hình</td> 
            </tr> 
    <?php 
        $stt = 0; 
        $sql1 = "select * from tin where idTL=$id limit $start,$y"; 
        $result1 = mysql_query($sql1); 
        while($data1 = mysql_fetch_array($result1)){ 
            $stt++; 
            echo "<tr>"; 
            echo "<td>$stt</td>"; 
            echo "<td>$data1[TieuDe]</td>"; 
            echo "<td><img src='data/$data1[UrlHinh]' title='$data1[TomTat]' /></td>"; 
            echo "</tr>";     
        } 
    } 
?> 
    <tr> 
        <td colspan="3"> 
        <div id="pt"> 
        <?php 
            for($i=1;$i<=$tongsotrang;$i++){ 
                if($i == $page){ 
                 echo "<span class='active'>$i</span>";     
                }else{ 
                    echo "<a href='#' onclick='javascript:loadXMLDoc($id,$i);'>$i</a>";     
                } 
            } 
        ?> 
        </div> 
        </td> 
    </tr> 
</table>

Download ajax_test.zip