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:
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.
Khi dữ liệu được trả về thì gọi hàm responseJson
hàm responseJson như sau :
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).
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.
Xử lý dữ liệu và gọi hàm Pagination
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:
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ý
.... 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
Đ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)+'">«</a></li>';
else numPage += '<li class="previous-off">«</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)+'">»</a></li>';
else numPage += '<li class="next-off">»</li>';
numPage += '</ul>';
return numPage;
}
{
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)+'">«</a></li>';
else numPage += '<li class="previous-off">«</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)+'">»</a></li>';
else numPage += '<li class="next-off">»</li>';
numPage += '</ul>';
return numPage;
}
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
});
type: "POST",
url: "./test.php",
processData: false,
dataType: "json",
success: 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
});
}
});
}
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
});
}
});
}
$.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);
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
});
}
});
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
});
}
});
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;
?>
$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;
?>
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;
}
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;
}
Demo here
Bài liên quan
trong php bạn trả về total page . javascript bạn dùng for(i.....) thế là xong.
Mình dùng Jquery để call ajax ko thấy àh ...
Đang mắc chỗ này