jQuery Ajax PHP Mysql implementation of paging display data example explanation

jQuery Ajax PHP Mysql implementation of paging display data example explanation_jquery

WBOY

Release： 2016-05-16 15:37:55

Original

2123 people have browsed it

This article uses jQuery, combined with PHP and Mysql, to explain how to achieve the Ajax data loading effect through examples.

HTML

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

Copy after login

In the

page, #list is used to display the data list, including the product images and titles to be displayed in this example, and #pagecount is used to display the paging bar, that is, the previous page and next page in this example.
Of course, don't forget to preload the jquery library file in the head.
CSS
We need to arrange the product images and set the paging bar style. Of course, the design of these styles can be set according to the data after successful reading. In this example, we first paste the css code.

#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

Copy after login

We declare the variables first, and the following variables will be used in the subsequent code.

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

Copy after login

Next, we customize a function: getData() to obtain the current page data. In the function, we use $.ajax() to send a POST asynchronous request to the background pages.php, and pass the current page number to the background in JSON format.

//获取数据 
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("数据加载失败"); 
  } 
 }); 
}

Copy after login

After the request is successful and the data is returned, the corresponding data is attached to the variable, and the returned product data list is displayed in a loop to the corresponding container #list ul. When the data is completely loaded, call the paging bar function getPageBar() to generate a paging bar.

//获取分页条 
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); 
}

Copy after login

Finally, when the page is loaded for the first time, we load the first page data, which is getData(1). When the paging link in the paging bar is clicked, getData(page) is called to load the data corresponding to the page number. We have pre-embedded the digital page number in the attribute rel of the page turning connection through the getPageBar() function.

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

Copy after login

PHP
pages.php receives each ajax request for the front-end page, obtains data from the mysql database based on the submitted page number pageNum value, calculates the total number of records and total pages, reads the data list under the corresponding page number, and displays the final result in JSON The format is returned to the front-end page.

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数据

Copy after login

At this time, return to the front-end page and you will see that the data has been paged with semicolons. Click "Next Page" to see if it is the effect you want. Check out the DEMO. You can customize the style of the paging bar. I gave it to you. It is the most basic style.
Finally, the Mysql table structure is attached, and the data table is included in the downloaded source code package. ^-^ It is all ready for you.

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;

Copy after login

The above is an example of jQuery Ajax PHP Mysql implementing paging display data. The Ajax paging effect makes your website data load very smoothly. I hope this article will be helpful to everyone's learning.