Lâu lắm mới viết những bài viết basic kiểu này. Nhưng không phải basic lúc nào cũng là dễ dàng đối với nhiều người. Ví dụ như bài viết về phân trang trong PHP này là một ví dụ: tôi phải lục tung lại đống code cũ đã viết để tìm nó nhằm ứng dụng cho một dự án thay vì phải ngồi ngâm cứu và viết lại. Thế nên tôi cứ viết và cứ post lên cho bạn nào quan tâm.
Phân trang trong PHP có nhiều dạng và nhiều cách làm tùy theo mục đích của người viết. Đây là cách phân trang mà mình thường làm và hiện nay vẫn dùng ở một số dự án. Bạn xem và tham khảo thêm:
[code language=”php”] function divPage($link="", $total = 0,$currentPage = 0,$div = 5,$rows = 10, $html=""){if($link=="")
$link="?page=";
if(!$total || !$rows || !$div || $total<=$rows) return false;
$nPage = floor($total/$rows) + (($total%$rows)?1:0);
$nDiv = floor($nPage/$div) + (($nPage%$div)?1:0);
$currentDiv = floor($currentPage/$div) ;
//$sPage = ‘<span class="phantrang_text">Tổng số <strong>’.$total.’</strong>. Hãy chọn trang: </span>’;
$sPage .= ‘<div class="pager">’;
if($currentDiv) {
$sPage .= "<a href=\"$link"."0".$html."\" class=\"first-button active\"></a>";
$sPage .= "<a href=\"$link".($currentDiv*$div – 1).$html."\" class=\"prev-button active\"></a>";
}
$count =($nPage<=($currentDiv+1)*$div)?($nPage-$currentDiv*$div):$div;
$sPage .= "<ul>";
for($i=0;$i<$count;$i++){
$page = ($currentDiv*$div + $i);
if($page==$currentPage){
$sPage .= "<li class=\"active\"><a href=\"$link".($currentDiv*$div + $i ).$html."\">". ($page+1) ."</a></li>";
}elseif($page == ($count -1)){
$sPage .= "<li class=\"last-child\"><a href=\"$link".($currentDiv*$div + $i ).$html."\">3</a></li>";
}else{
$sPage .="<li><a href=\"$link".($currentDiv*$div + $i ).$html."\">".($page+1)."</a></li>";
}
}
$sPage .= "</ul>";
if($currentDiv < $nDiv – 1){
$sPage .= "<a class=\"next-button active\" href=\"$link".(($currentDiv+1)*$div ).$html."\"></a>";
$sPage .= "<a class=\"last-button active\" href=\"$link".(($nDiv-1)*$div + 1 ).$html."\"></a>";
}
$sPage .= "</div>";
return $sPage;
}
[/code]
Phụ mục
Chú thích về code phân trang
Người mới tìm hiểu nhìn vào chắc còn có vài chỗ lạ lẫm, nên mình giải thích luôn ý nghĩa một vài biến đã sử dụng:
- $link: đây là phần phía trước của chuỗi phân trang. Mình tách riêng ra để hỗ trợ khi cần cho bạn nào muốn viết module rewrite URL. Việc tách riêng này giúp cho điều khiển biến trước và sau biến số trang được dễ dàng hơn.
- $total: tổng số record
- $currentPage: trang hiện tại của bạn.
- $div: số nút bấm sẽ hiển thị.
- $rows: số dòng dữ liệu sẽ hiện trong mỗi trang.
- $html: phần ở rộng kiểu chuỗi ở phía sau, cũng giống như biến $link, nó dùng để mở rộng nếu bạn cần truyền thêm đối số hoặc viết module rewrite.
Hàm trên sẽ tạo ra một đoạn mã HTML dùng để hiển thị phân trang; bao gồm các nút – >> như hình sau:
Kết quả phân trangSử dụng code phân trang như thế nào ?
Sau đây là ví dụ hoàn chỉnh về code phân trang này mà tôi đã và đang sử dụng, hi vọng có ích cho các bạn.
[code language=”php”] $p = $_GET[‘p’];// currentPage$rows = 10; // số record trên mỗi trang
$div = 5; // số trang trên 1 phân đoạn
$sql = "SELECT COUNT(*) AS total FROM <table> WHERE <dieu_kine>";
//fetch dữ liệu lấy giá trị của total, tổng số record với điều kiện là <dieu_kien>, ta được biến $total;
//lấy dữ liệu cho trang $p
$start = $p*$rows;
$sql = "SELECT * FROM <table> WHERE <dieu_kine> LIMIT $start,$rows";
// hiển thị dữ liệu
// in phân trang
echo divPage("", $total,$p,$div,$rows, "")
Phần phía trước phân trang và phía sau tạm thời bỏ trống, bạn muốn thêm gì vào thì thêm.
Download stylesheet
Sẵn tiện tôi bổ sung đoạn stylesheet đã sử dụng để bạn nghịch luôn nếu thích style phân trang giống như tôi.
[code language=”css”].first-button{
width:26px;
height:25px;
float:left;
background:url(../images/first-arr.jpg) left top no-repeat;
margin-left:10px;
}
.last-button{
width:26px;
height:25px;
float:left;
background:url(../images/last-arr.jpg) left top no-repeat;
margin-left:10px;
}
.prev-button{
width:26px;
height:25px;
float:left;
background:url(../images/pre-arr.jpg) left top no-repeat;
margin-left:10px;
}
.next-button{
width:26px;
height:25px;
float:left;
background:url(../images/next-arr.jpg) left top no-repeat;
margin-left:10px;
}
.pager ul {
float:left;
margin-left:10px;
}
.pager .active {
background-position: left -25px!important;
}.pager .active a{
color:#fff;
}
.pager ul li{
float:left;
text-align:center;
line-height:25px;
height:25px;
color:#;
background:url(../images/middle-page-bg.jpg) left top no-repeat;
width:24px;
border-left:1px solid #bab0a6;
font-weight:bold;
}
.pager ul li:first-child{
background:url(../images/left-page-bg.jpg) left top no-repeat;
width:26px;
border-left:0px solid #bab0a6;
}
.pager ul li.last-child{
background:url(../images/right-page-bg.jpg) left top no-repeat;
width:26px;
}
[/code]
Đây là các hình tôi đã sử dụng: , , , , , , .
Vậy là đã đủ tất cả để bạn có thể bắt đầu nghịch rồi.
Chúc các bạn có một code phân trang tốt.