jQuery Ajax PHP Mysql pelaksanaan paging data paparan contoh explanation_jquery

Artikel ini menggunakan jQuery, digabungkan dengan PHP dan Mysql, untuk menerangkan cara mencapai kesan pemuatan data Ajax melalui contoh.

HTML

<div id="list"> 
 <ul></ul> 
</div> 
<div id="pagecount"></div> 

Dalam halaman

, #list digunakan untuk memaparkan senarai data, termasuk imej dan tajuk produk yang akan dipaparkan dalam contoh ini, dan #pagecount digunakan untuk memaparkan bar paging, iaitu halaman sebelumnya dan halaman seterusnya dalam contoh ini.
Sudah tentu, jangan lupa untuk pramuat fail perpustakaan jquery di kepala.
CSS
Kita perlu menyusun imej produk dan menetapkan gaya bar paging Sudah tentu, reka bentuk gaya ini boleh ditetapkan mengikut data selepas berjaya membaca.

#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} 
jQuery

Kami mengisytiharkan pembolehubah terlebih dahulu, dan pembolehubah berikut akan digunakan dalam kod seterusnya.

var curPage = 1; //当前页码 
var total,pageSize,totalPage; //总记录数，每页显示数，总页数 

Seterusnya, kami menyesuaikan fungsi: getData() untuk mendapatkan data halaman semasa. Dalam fungsi tersebut, kami menggunakan $.ajax() untuk menghantar permintaan tak segerak POST ke halaman latar belakang.php, dan menghantar nombor halaman semasa ke latar belakang dalam format JSON.

//获取数据 
function getData(page){ 
 $.ajax({ 
  type: 'POST', 
  url: 'pages.php', 
  data: {'pageNum':page-1}, 
  dataType:'json', 
  beforeSend:function(){ 
   $("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画 
  }, 
  success:function(json){ 
   $("#list ul").empty();//清空数据区 
   total = json.total; //总记录数 
   pageSize = json.pageSize; //每页显示条数 
   curPage = page; //当前页 
   totalPage = json.totalPage; //总页数 
   var li = ""; 
   var list = json.list; 
   $.each(list,function(index,array){ //遍历json数据列 
    li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title'] 
    +"</a></li>"; 
   }); 
   $("#list ul").append(li); 
  }, 
  complete:function(){ //生成分页条 
   getPageBar(); 
  }, 
  error:function(){ 
   alert("数据加载失败"); 
  } 
 }); 
} 

Selepas permintaan berjaya dan data dikembalikan, data yang sepadan dilampirkan pada pembolehubah dan senarai data produk yang dikembalikan dipaparkan dalam gelung ke bekas yang sepadan #list ul. Apabila data dimuatkan sepenuhnya, panggil fungsi bar paging getPageBar() untuk menjana bar paging.

//获取分页条 
function getPageBar(){ 
 //页码大于最大页数 
 if(curPage>totalPage) curPage=totalPage; 
 //页码小于1 
 if(curPage<1) curPage=1; 
 pageStr = "<span>共"+total+"条</span><span>"+curPage 
 +"/"+totalPage+"</span>"; 
  
 //如果是第一页 
 if(curPage==1){ 
  pageStr += "<span>首页</span><span>上一页</span>"; 
 }else{ 
  pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span> 
  <span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"; 
 } 
  
 //如果是最后页 
 if(curPage>=totalPage){ 
  pageStr += "<span>下一页</span><span>尾页</span>"; 
 }else{ 
  pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 
  下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a> 
  </span>"; 
 } 
   
 $("#pagecount").html(pageStr); 
} 

Akhir sekali, apabila halaman dimuatkan buat kali pertama, kami memuatkan data halaman pertama, iaitu getData(1) Apabila pautan paging dalam bar paging diklik, getData(page) dipanggil untuk memuatkan data sepadan dengan nombor muka surat. Kami telah membenamkan nombor halaman digital dalam rel atribut sambungan pusingan halaman melalui fungsi getPageBar().

$(function(){ 
 getData(1); 
 $("#pagecount span a").live('click',function(){ 
  var rel = $(this).attr("rel"); 
  if(rel){ 
   getData(rel); 
  } 
 }); 
}); 

PHP
pages.php menerima setiap permintaan ajax untuk halaman hadapan, mendapatkan data daripada pangkalan data mysql berdasarkan nilai pageNum nombor halaman yang diserahkan, mengira jumlah rekod dan jumlah halaman, membaca senarai data di bawah nombor halaman yang sepadan, dan memaparkan hasil akhir dalam JSON Format dikembalikan ke halaman hujung hadapan.

include_once('connect.php'); //连接数据库，略过，具体请下载源码查看 
 
$page = intval($_POST['pageNum']); //当前页 
 
$result = mysql_query("select id from food"); 
$total = mysql_num_rows($result);//总记录数 
$pageSize = 6; //每页显示数 
$totalPage = ceil($total/$pageSize); //总页数 
 
$startPage = $page*$pageSize; //开始记录 
//构造数组 
$arr['total'] = $total; 
$arr['pageSize'] = $pageSize; 
$arr['totalPage'] = $totalPage; 
$query = mysql_query("select id,title,pic from food order by id asc limit 
$startPage,$pageSize"); //查询分页数据 
while($row=mysql_fetch_array($query)){ 
  $arr['list'][] = array( 
   'id' => $row['id'], 
  'title' => $row['title'], 
  'pic' => $row['pic'], 
  ); 
} 
echo json_encode($arr); //输出JSON数据 

Pada masa ini, kembali ke halaman hadapan dan anda akan melihat bahawa data telah dihalakan dengan koma bertitik. Klik "Halaman Seterusnya" untuk melihat sama ada ia adalah kesan yang anda mahukan gaya bar paging yang saya berikan kepada anda. Ia adalah gaya yang paling asas.
Akhir sekali, struktur jadual Mysql dilampirkan, dan jadual data disertakan dalam pakej kod sumber yang dimuat turun ^-^ Semuanya sedia untuk anda.

CREATE TABLE IF NOT EXISTS `food` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `title` varchar(100) NOT NULL, 
 `pic` varchar(255) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

Di atas adalah contoh jQuery Ajax PHP Mysql melaksanakan data paparan paging Kesan paging Ajax menjadikan data tapak web anda dimuatkan dengan sangat lancar.