javascript代码实例教程-jQuery+Ajax+PHP+Mysql实现分页显示数据

发布时间:2019-02-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery+Ajax+PHP+Mysql实现分页显示数据脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 主要代码:

 index.htML

XML/@L_304_0@ Code

<script tyPE="text/javascript">  

VAR curPage = 1; //当前页码  

var total,pageSize,totalPage;  

//获取数据  

function getData(page){   

$.ajax({  

type: &#39;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='#'>"+array['tITle']+"</a></li>";  

});  

$("#list ul").append(li);  

},  

complete:function(){ //生成分页条  

getPageBar();  

},  

error:function(){  

alert("数据加载失败");  

}  

});  

}  

  

//获取分页条  

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

}  

  

$(function(){  

getData(1);  

$("#pagecount span a").live('click',function(){  

var rel = $(this).attr("rel");  

if(rel){  

getData(rel);  

}  

});  

});  

</script>  

</head>  

  

<body>  

<h1 class="LOGo"><a href="https://www.freejs.net" title="freejs首页"><img src="../../images/logo.png" height="47" width="500" alt="freejs首页" /></a></h1>  

<p id=";main_demo">  

<p align="center"><h2><a href="../../article_biaodan_10.html">jQuery+Ajax+PHP+MySQL实现分页显示数据</a></h2></p>  

<p id="main">  

<p id="list">  

<ul></ul>  

</p>  

<p id="pagecount"></p>  

</p>  

pages.php

 

PHP Code

<?php  

include_once('conn.php');  

  

$page = intval($_POST['pageNum']);  

  

$result = mysql_query("select * From content");  

$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 * from content order by id asc limit $startPage,$pageSize");  

while($row=mysql_fetch_array($query)){  

$arr['list'][] = array(  

'id' => $row['id'],  

'title' => $row['name'],  

  

);  

}  

//PRint_r($arr);  

echo json_encode($arr);  

?>   

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery+Ajax+PHP+Mysql实现分页显示数据全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery+Ajax+PHP+Mysql实现分页显示数据所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。