thanh tuan

http://www.ithanam.com

Đường dẫn: trang chủ Lập trình PHP Phân trang Ajax JSON và PHP

Phân trang Ajax JSON và PHP

Quản trị viên
Email In PDF.

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:

 

 

  1. var Pagination = function(offset, numOfPage, currentPage)
  2.  
  3. {
  4.  
  5. var pageStart = parseFloat(currentPage) - parseFloat(offset);
  6.  
  7. var pageEnd = parseFloat(currentPage) + parseFloat(offset);
  8.  
  9. var numPage = new String();
  10.  
  11. if(numOfPage < 1) return false;
  12.  
  13. numPage += '<ul id="et-pagi">';
  14.  
  15. if(currentPage > 1) numPage += '<li class="previous"><a href="javascript:;" name="page'+(parseFloat(currentPage) - 1)+'">«</a></li>';
  16.  
  17. else numPage += '<li class="previous-off">«</li>';
  18.  
  19. if(currentPage > (offset + 1)) numPage += '<li><a href="javascript:;" name="page1">1</a></li><li class="spacing-dot"> ... </li>';
  20.  
  21. for(i = 1; i <= numOfPage; i++){
  22.  
  23. if(pageStart <= i && pageEnd >= i){
  24.  
  25. if(i == currentPage) numPage += '<li class="active">'+i+'</li>';
  26.  
  27. else numPage += '<li><a href="javascript:;" name="page'+i+'">'+i+'</a></li>';
  28.  
  29. }
  30.  
  31. }
  32.  
  33. if(numOfPage > pageEnd) numPage += '<li class="spacing-dot"> ... </li><li><a href="javascript:;" name="page'+numOfPage+'">'+numOfPage+'</a></li>';
  34.  
  35. if(currentPage < numOfPage) numPage += '<li class="next"><a href="javascript:;" name="page'+(parseFloat(currentPage) + 1)+'">»</a></li>';
  36.  
  37. else numPage += '<li class="next-off">»</li>';
  38.  
  39. numPage += '</ul>';
  40.  
  41. return numPage;
  42.  
}

Xem source

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;

 

}

 

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.

 

  1. $.ajax({
  2.  
  3. type: "POST",
  4.  
  5. url: "./test.php",
  6.  
  7. processData: false,
  8.  
  9. dataType: "json",
  10.  
  11. success: responseJson
  12.  
  13. });

 

$.ajax({

 

type: "POST",

 

url: "./test.php",

 

processData: false,

 

dataType: "json",

 

success: responseJson

 

});

 

Xem source

$.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 :

 

  1. var responseJson = function(data){
  2.  
  3. var rowPerPage = 10;
  4.  
  5. var html = new String();
  6.  
  7. var totalPage = parseFloat(data.total) / rowPerPage;
  8.  
  9. var current = data.crr;
  10.  
  11. var record = 5;
  12.  
  13. var currentNow = new String();
  14.  
  15.  
  16.  
  17. $.each(data.items, function(i,item){
  18.  
  19. html += '<tr><td bgcolor="#f5f5f5">ID:
  20. '+item.id+'</td><td>Content:
  21. '+item.content+'</td></tr>';
  22.  
  23. });
  24.  
  25. $("#content-wrapper").html(html);
  26.  
  27. $("#pagi-wrapper").html(Pagination(record,totalPage,current  ));
  28.  
  29.  
  30.  
  31. $("#pagi li a").click(function(){
  32.  
  33. currentNow = $(this).attr("name").substr(4);
  34.  
  35. if($(this).attr("name").length > 0)
  36.  
  37. {
  38.  
  39. $.ajax({
  40.  
  41. type: "POST",
  42.  
  43. url: "./test.php",
  44.  
  45. data: "currPage="+currentNow,
  46.  
  47. processData: false,
  48.  
  49. dataType: "json",
  50.  
  51. success: responseJson
  52.  
  53. });
  54.  
  55. }
  56.  
  57. });
  58.  
  59. }
 
Xem source
 
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).

 

  1. $.each(data.items, function(i,item){
  2.  
  3. html += '<tr><td bgcolor="#f5f5f5">ID:
  4. '+item.id+'</td><td>Content:
  5. '+item.content+'</td></tr>';
  6.  
  7. });
  8.  
  9. $("#content-wrapper").html(html);


 

 Xem source

$.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  ));

 

Xem source

$("#pagi-wrapper").html(Pagination(record,totalPage,current  ));

 

Xử lý dữ liệu và gọi hàm Pagination 

 

  1. $("#pagi li a").click(function(){
  2.  
  3. currentNow = $(this).attr("name").substr(4);
  4.  
  5. if($(this).attr("name").length > 0)
  6.  
  7. {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "./test.php",
  14.  
  15. data: "currPage="+currentNow,
  16.  
  17. processData: false,
  18.  
  19. dataType: "json",
  20.  
  21. success: responseJson
  22.  
  23. });
  24.  
  25. }
  26.  
});

Xem source

$("#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:

 

  1. <?php
  2.  
  3. $curr = (!isset($_POST{'currPage'})) ? "1" : $_POST{'currPage'};
  4.  
  5. $arrData = array(
  6.  
  7. array("id" => "1", "content" => "Hello the world"),
  8.  
  9. array("id" => "2", "content" => "Hello the Việt Nam"),
  10.  
  11. array("id" => "3", "content" => "Hello the Ho Chi Minh City"),
  12.  
  13. array("id" => "4", "content" => "Hello the Ha Noi City"),
  14.  
  15. array("id" => "5", "content" => "Hello the Bien Hoa City"),
  16.  
  17. array("id" => "6", "content" => "Hello the Vung Tau City"),
  18.  
  19. array("id" => "7", "content" => "Hello the Quang Ngai City"),
  20.  
  21. array("id" => "8", "content" => "Hello the Nha Trang City"),
  22.  
  23. array("id" => "9", "content" => "Hello the Da Nang City"),
  24.  
  25. array("id" => "10", "content" => "Hello the Lang Son City")
  26.  
  27. );
  28.  
  29. // when u want usage data page .. please control update more by $curr
  30.  
  31. $jsonData = json_encode($arrData);
  32.  
  33. $jsonData = "({'total':'1000','crr':'".$curr."','items':".$jso  nData."})";
  34.  
  35. echo $jsonData;
  36.  
?>

Xem source

<?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ý

 

  1. #pagi li {
  2.  
  3. border:0;
  4.  
  5. margin:0;
  6.  
  7. padding:0;
  8.  
  9. font-size:11px;
  10.  
  11. list-style:none; /* savers */
  12.  
  13. float:left;
  14.  
  15. }
  16.  
  17. #pagi a {
  18.  
  19. border:solid 1px #ddd;
  20.  
  21. margin-right:2px;
  22.  
  23. }
  24.  
  25. #pagi .previous-off,
  26.  
  27. #pagi .spacing-dot,
  28.  
  29. #pagi .next-off {
  30.  
  31. color:#666;
  32.  
  33. display:block;
  34.  
  35. float:left;
  36.  
  37. font-weight:bold;
  38.  
  39. padding:3px 4px;
  40.  
  41. }
  42.  
  43. #pagi .spacing-dot {
  44.  
  45. font-weight:normal;
  46.  
  47. }
  48.  
  49. #pagi .next a,
  50.  
  51. #pagi .previous a {
  52.  
  53. font-weight:bold;
  54.  
  55. border:solid 1px #fff;
  56.  
  57. }
  58.  
  59. #pagi .active {
  60.  
  61. color:#ff0084;
  62.  
  63. font-weight:bold;
  64.  
  65. display:block;
  66.  
  67. float:left;
  68.  
  69. padding:4px 6px;
  70.  
  71. padding-right:8px;
  72.  
  73. }
  74.  
  75. #pagi a:link,
  76.  
  77. #pagi a:visited {
  78.  
  79. color:#0063e3;
  80.  
  81. display:block;
  82.  
  83. float:left;
  84.  
  85. padding:3px 6px;
  86.  
  87. text-decoration:none;
  88.  
  89. }
  90.  
  91. #pagi a:hover {
  92.  
  93. border:solid 1px #666;
  94.  
  95. }

    Xem source
    #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;

    }

 (PHP)

 

Liên kết web

Hỗ trợ online

Hỗ trợ từ Admin
Thanh Tuấn

Thanh Tuấn

Tư vấn Admin
Thanh Tuấn

Thanh Tuấn

Đăng nhập

SỐ NGƯỜI ONLINE

Hiện có 7 khách Trực tuyến

Liên kết logo

Chào mừng các bạn đã đến với ITHANAM.COM
thanh tuan 
thanh tuan
 
thanh tuan
 
thanh tuan 
thanh tuan 
thanh tuan 
Công nghệ thông tin Hà Nam 
Công nghệ thông tin Hà Nam 
Công nghệ thông tin Hà Nam