10/10/2018, 11:11

Phân trang với JQUERY JSON và PHP

Dạo gần đây trên cái forum hay thấy các bạn nhắc đến việc Phân trang bằng Ajax ... mình thì cũng là newbie nên cũng có mơ ước làm đc 1 cái pagi thật oách dùng Siêu công nghệ AJAX ... ) Lúc đầu thì nghĩ nó cao siêu lém cơ nhưng bắt tay vào việc rùi thì thấy lại cực kỳ đơn giản và không khó như mình hay các bạn tưởng tượng. Thuật toán của nó cũng đơn giản, giống như các thuật toán phân trang trong PHP, không khó khăn nếu bạn đã viết được phân trang bằng PHP.

Điều kiện trước khi đọc bài viết:
1 .Biết 1 tý về Thư viện JQUERY
2. Hiễu 1 tý về JSON
3. và PHP ... là cốt lõi. =))
Yêu cầu:
Download jQuery tại www.jquery.com .
Cài đặt Webserver ^^ ( tất nhiên rùi nhỉ :>)

Okie bắt đầu vào vấn đề nhé ... ^^

Đầu tiên, chúng ta cần tham khảo hàm javascript dưới đây:
var Pagination = function(offset, numOfPage, currentPage)
{
var pageStart = parseFloat(currentPage) - parseFloat(offset);
var pageEnd = parseFloat(currentPage) + parseFloat(offset);
var numPage = new String();
if(numOfPage < 1) return false;
numPage += '<ul id="et-pagi">';
if(currentPage > 1) numPage += '<li class="previous"><a href="javascript:;" name="page'+(parseFloat(currentPage) - 1)+'">&laquo;</a></li>';
else numPage += '<li class="previous-off">&laquo;</li>';
if(currentPage > (offset + 1)) numPage += '<li><a href="javascript:;" name="page1">1</a></li><li class="spacing-dot"> ... </li>';
for(i = 1; i <= numOfPage; i++){
if(pageStart <= i && pageEnd >= i){
if(i == currentPage) numPage += '<li class="active">'+i+'</li>';
else numPage += '<li><a href="javascript:;" name="page'+i+'">'+i+'</a></li>';
}
}
if(numOfPage > pageEnd) numPage += '<li class="spacing-dot"> ... </li><li><a href="javascript:;" name="page'+numOfPage+'">'+numOfPage+'</a></li>';
if(currentPage < numOfPage) numPage += '<li class="next"><a href="javascript:;" name="page'+(parseFloat(currentPage) + 1)+'">&raquo;</a></li>';
else numPage += '<li class="next-off">&raquo;</li>';
numPage += '</ul>';
return numPage;
}
Các tham số truyền vào hàm gồm có offset, numOfPage và currentPage ...
Giải thích các tham số:

offset: số phẩn tử div hay còn gọi là .... từng trang sẽ hiện ra ..
thí dụ : 1 - 2 - 3 - 4 - [5] - .. 100
numOfPage: tổng số records chia cho số records hiện ra ...
thí dụ: muốn hiện 10 record và tổng số records trong database là 100 thì 100/10
currentPage: số trang hiện hữu.

Trước tiên chúng ta cần gọi ajax để lấy các thông tin cần thiết để thiết lập Phân trang.
$.ajax({
type: "POST",
url: "./test.php",
processData: false,
dataType: "json",
success: responseJson
});
Khi dữ liệu được trả về thì gọi hàm responseJson
hàm responseJson như sau :
var responseJson = function(data){
var rowPerPage = 10;
var html = new String();
var totalPage = parseFloat(data.total) / rowPerPage;
var current = data.crr;
var record = 5;
var currentNow = new String();

$.each(data.items, function(i,item){
html += '<tr><td bgcolor="#f5f5f5">ID: '+item.id+'</td><td>Content: '+item.content+'</td></tr>';
});
$("#content-wrapper").html(html);
$("#pagi-wrapper").html(Pagination(record,totalPage,current ));

$("#pagi li a").click(function(){
currentNow = $(this).attr("name").substr(4);
if($(this).attr("name").length > 0)
{
$.ajax({
type: "POST",
url: "./test.php",
data: "currPage="+currentNow,
processData: false,
dataType: "json",
success: responseJson
});
}
});
}
Hàm này mục đích lấy dữ liệu trả về từ PHP phân tích và in ra kết quả ... lợi dụng điều này chúng ta cho đi kèm theo nó với dữ liệu của tổng số record hiện có (data.total) và số trang hiện hữu (data.crr).
$.each(data.items, function(i,item){
html += '<tr><td bgcolor="#f5f5f5">ID: '+item.id+'</td><td>Content: '+item.content+'</td></tr>';
});
$("#content-wrapper").html(html);
Gọi hàm each fetch dữ liệu từ đối tượng items và lấy ra 2 kết quả cho vào biến html sau đó in ra kết quả với hàm .html() của jquery.
$("#pagi-wrapper").html(Pagination(record,totalPage,current ));
Xử lý dữ liệu và gọi hàm Pagination
$("#pagi li a").click(function(){
currentNow = $(this).attr("name").substr(4);
if($(this).attr("name").length > 0)
{
$.ajax({
type: "POST",
url: "./test.php",
data: "currPage="+currentNow,
processData: false,
dataType: "json",
success: responseJson
});
}
});
Tiếp đến thì gọi sự kiện click của khách và gọi lại hàm responseJson

Trang PHP như sau:
<?php
$curr = (!isset($_POST['currPage'])) ? "1" : $_POST['currPage'];
$arrData = array(
array("id" => "1", "content" => "Hello the world"),
array("id" => "2", "content" => "Hello the Việt Nam"),
array("id" => "3", "content" => "Hello the Ho Chi Minh City"),
array("id" => "4", "content" => "Hello the Ha Noi City"),
array("id" => "5", "content" => "Hello the Bien Hoa City"),
array("id" => "6", "content" => "Hello the Vung Tau City"),
array("id" => "7", "content" => "Hello the Quang Ngai City"),
array("id" => "8", "content" => "Hello the Nha Trang City"),
array("id" => "9", "content" => "Hello the Da Nang City"),
array("id" => "10", "content" => "Hello the Lang Son City")
);
// when u want usage data page .. please control update more by $curr
$jsonData = json_encode($arrData);
$jsonData = "({'total':'1000','crr':'".$curr."','items':".$jso nData."})";
echo $jsonData;
?>
Việc tiếp theo của bạn là ... thay đổi sao cho hợp lý là được.

Thế là kết thúc ..
Bổ xung thêm CSS cho nó đẹp 1 tý
#pagi li {
border:0;
margin:0;
padding:0;
font-size:11px;
list-style:none; /* savers */
float:left;
}
#pagi a {
border:solid 1px #ddd;
margin-right:2px;
}
#pagi .previous-off,
#pagi .spacing-dot,
#pagi .next-off {
color:#666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagi .spacing-dot {
font-weight:normal;
}
#pagi .next a,
#pagi .previous a {
font-weight:bold;
border:solid 1px #fff;
}
#pagi .active {
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
padding-right:8px;
}
#pagi a:link,
#pagi a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagi a:hover {
border:solid 1px #666;
}
.... Nếu có vấn đề hoặc thắc mắc vui lòng post tại đây nhé ... mình sẽ reply lại giúp các bạn ...

Demo here
Thanh duc viết 13:14 ngày 10/10/2018
Sao ko dùng php trả về cho nhanh dùng javascript với json nhìn đau cả mắt
kenphan19 viết 13:19 ngày 10/10/2018
Tốc độ được ưu tiên hàng đầu ... ^^
bka viết 13:23 ngày 10/10/2018
nếu chỉ để phân trang bạn dùng cái thư viện ấy có thấy rách việc không.
trong php bạn trả về total page . javascript bạn dùng for(i.....) thế là xong.
kenphan19 viết 13:13 ngày 10/10/2018
nói như bác chắc ... jquery, prototype, hay mootools là thư viện rách việc àh
bka viết 13:14 ngày 10/10/2018
Được gửi bởi kenphan19
nói như bác chắc ... jquery, prototype, hay mootools là thư viện rách việc àh
hì. bạn hiểu sai ý mình rùi. những cái đơn giản thì đừng làm nó phức tạp hơn thui
kenphan19 viết 13:15 ngày 10/10/2018
Được gửi bởi bka
hì. bạn hiểu sai ý mình rùi. những cái đơn giản thì đừng làm nó phức tạp hơn thui
èo ... mình là newbie nên khi viết thành công 1 cái pagi bằng ajax là 1 vấn đề lớn ... và muốn chia sẽ với các newbie khác ... còn bạn pro rùi nên khi xem và cảm nhận thì cho rắng nó phứt tạp ... ^^.

Mình dùng Jquery để call ajax ko thấy àh ...
toannet viết 13:24 ngày 10/10/2018
bài viết cũng hay lắm . cố gắng thêm bạn nhé ...
hackson viết 13:26 ngày 10/10/2018
Cái này cả server & client đều đuối
vietnux viết 13:28 ngày 10/10/2018
tôi dùng php + ajax + jquery đây mà nó báo lỗi parseJSON: filter failed, lúc đầu tưởng cái url sai nhưng không phải, lỗi do nó chuyển từ javascrip về php thì được nhưng từ php ngược lại thì không được
Đang mắc chỗ này
Bài liên quan
0