jQuery Ajax PHP Mysql实现分页显示数据示例讲解

本文采用jQuery，结合PHP和Mysql，通过实例说明如何实现Ajax数据加载效果。

超文本标记语言

div id=' list ' ul/ul/div div id=' page count '/div page，#list用于显示数据列表，包括本例中要显示的产品图片和标题，#pagecount用于显示分页栏，即本例中的上一页和下一页。当然，不要忘记在head中预加载jquery库文件。我们需要在css中排列商品图片和设置分页栏的样式。当然，这些款式的设计可以根据阅读成功后的数据进行设置。在这个例子中，我们将首先粘贴CSS代码。

# list { width:680px高度：530 px；margin:2px汽车；position : relative } # list ul Li { float : left；宽度width:220px高度：260 px；margin :2 px } # list ul Li img { width :220 px；height :220 px } # list ul Li p { line-height :22 px } # page count { width :500 px；margin:10px汽车；text-align : center } # page count span { margin :4 px；font-size :14 px } # list ul Li #正在加载{ width:120pxheight:32pxborder:1px固体# d3d3d3位置：绝对；top:35左侧：42%；文本对齐：居中；background : # f7f 7 URL(loading . gif)no-repeat 8px 8px；-moz-box-shadow :1 px 1px 2px rgba(0，0，0， 2)；-web kit-box-shadow :1 px 1px 2px rgba(0，0，0， 2)；box-shadow:1px 1px 2px rgba(0，0，0， 2)；} jQuery我们先声明变量，下面的代码中会用到下面的变量。

var CurPage=1；//当前页码var total、pageSize、totalPage//记录总数、每页显示数、总页数接下来，我们定义一个函数：getData()，用于获取当前页面的数据。函数，我们使用$。ajax()向后台pages.php发送一个POST异步请求，并将当前页码以JSON格式传递给后台。

//get data函数getdata (page) {$。Ajax ({type:' post '，url3360' pages.php '，data : { ' page num ' : page-1 }，datatype3360' JSON '，BeforeSend : FuncTion(){ $(' # list ul ')。追加(' li id='loading '正在加载./Li ')；//显示加载动画}，成功：函数(JSON) {$ ('# listul ')。empty()；//清空数据区total=json.total//总记录数pageSize=json.pageSize//每页显示的文章数curPage=页数；//当前页面totalPage=json.totalPage//总页数var li=var list=json.list$.每个(列表、函数(索引、数组){//遍历json数据列Li=' lia href=' # ' img src=' ' array[' pic ']' array[' title ']'/a/Li '；});$('#list ul ')。追加(Li)；}，complete:function(){ //生成页面栏getPageBar()；}，error:function(){ alert('数据加载失败')；} });}请求成功后，返回数据，将对应的数据附加到变量中，在对应的容器#list ul中循环显示返回的商品数据列表。数据完全加载后，调用分页栏函数getPageBar()生成一个分页栏。

//获取分页栏函数getPageBar(){ //如果(cur page total page)cur page=total page，则页码大于最大页数；//如果(curPage1) curPage=1，则页码小于1；page str=' span total '/span span ' cur page '/' total page '/span '；//如果是第一页if(cur page==1){ page ster=' span first page/span span previous page/span '；} else { page str=' spana href=' JavaScript 3360 void(0)' rel=' 1 '主页/a/span spana href=' JavaScript 3360 void(0)' rel=' '(cur page-1)' '上一页/a/span '；}//如果是最后一页，如果(cur page=total page){ page ster=' span下一页/span span span最后一页/span '；} else { page str=' spana href=' JavaScript 3360 void(0)' rel=' '(par sent(cur page)1)' '下一页/a/span spa href=' JavaScript 3360 void(0)' ' rel=' total page ' '最后一页/。} $('#pagecount ')。html(PageStr)；}最后，当第一次加载页面时，我们加载第一页数据，即getData(1)。当我们点击分页栏中的分页链接时，我们调用getData(page)来加载与页码对应的数据。通过getPageBar()函数，我们提前在翻页连接的属性rel中嵌入了数字页码。

$(function(){ getData(1)；$('#pagecount span a ')。live('click '，function(){ var rel=$(this)。attr(' rel ')；if(rel){ GetDATa(rel)；} });});PHPpages.php接收每个前端页面的ajax请求，根据提交的pageNum值从mysql数据库中获取数据，计算记录和页面总数，读取相应页码下的数据列表，并将最终结果以JSON格式返回给前端页面。

include _ once(' connect . PHP ')；//连接数据库，跳过，请下载源代码查看$ page=int val($ _ POST[' page num '])；//当前页面$ result=MySQL _ query('从食物中选择id ')；$ total=MySQL _ num _ rows($ result)；//记录总数$ page size=6；//每页显示数量$ total page=ceil($ total/$ page size)；//总页数$ startPage=$ page * $ pageSize//开始录制//构造数组$ arr[' total ']=$ total；$ arr[' PageSize ']=$ PageSize；$ arr[' TotalPage ']=$ TotalPage；$query=mysql_query('按id从食品订单中选择id、标题、pic ASC限制$startPage、$ page size ')；//查询分页数据while($ row=MySQL _ fetch _ array($ query)){ $ arr[' list '][]=array(' id '=$ row[' id ']，' title'=$ row ['title']，' pic'=$ row。} echo JSON _ encode($ arr)；//输出JSON数据，然后回到首页，即看到数据有分号的页面，点击“下一页”看是否是你想要的效果，勾选DEMO。你可以自己定制分页栏的样式，我给你最基本的样式。最后附上Mysql表结构，数据表包含在下载源码包中，已经为大家准备好了。

如果不存在则创建表格` 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；以上是关于jQuery Ajax PHP Mysql实现数据分页显示的例子。Ajax分页效果让你的网站数据加载非常流畅。希望这篇文章对大家的学习有所帮助。