index.html
XML/HTML Code
- <script type="text/javascript">
- var curPage = 1; //当前页码
- var total,pageSize,totalPage;
- //获取数据
- 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='#'>"+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="http://www.freejs.net" title="freejs首页"><img src="../../images/logo.png" height="47" width="500" alt="freejs首页" /></a></h1>
- <div id="main_demo">
- <div align="center"><h2><a href="../../article_biaodan_10.html">jQuery+Ajax+PHP+Mysql实现分页显示数据</a></h2></div>
- <div id="main">
- <div id="list">
- <ul></ul>
- </div>
- <div id="pagecount"></div>
- </div>
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);
- ?>
相关推荐
是一个典型的Ajax应用,在页面上,您只需要点击“下一页”,数据区将自动加载...类似的效果在很多网站上应用,尤其在一些需要展示大量图片数据的网页如淘宝商品列表页,Ajax分页效果让您的网站数据加载显得非常流畅。
用jQuery,结合PHP和Mysql,通过获取json数据实现网页分页数据
本文件包含 文件夹img、js、css、class和文件dele.php、 ... 通过php+mysql+jquery实现无刷新评论,包含分页!!还包含星级评分。 界面美观大方,大家稍稍修改就可运用在自己的网页系统中!!!!
简单的ajax分页实例,数据库是mysql,运用jquery、ajax、springMVC技术
这是用Jquery+AJAX 来实现页面的无刷新技术 主要是一个分页的功能
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,感兴趣的小伙伴们可以参考一下
代码中用到了较多的jQuery和部分Ajax(借助jQuery实现),在阅读代码的时候如果不熟悉jQuery和Ajax的话,还是先去稍微学习几个入门实例较好。 二、运行方式: a. 创建数据库:我用的是MySQL 5.1版本,不同版本之间...
S2SH+JSON+JQuery+Mysql实现ajax分页
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,感兴趣的小伙伴们可以参考一下
该源码是asp.net+jquery+ajax简单留言板例子 v1.1,该源码是本例采用asp.net C#+ jquery1.4.1 +ajax的实现 本例主要用aspx文件请求 还可以用ashx处理 ajax返回类型也很多如: dataType: "xml", dataType: "json", ...
jQuery ajax 局部刷新分页。mysql数据库
该项目是javaJeb技术的实战操作,采用了MVC设计模 式,包括基本的entity, jscript, servlet,以及ajax异步请 求,查询分页,持久化层方法的封装等等,对javaweb技 术的巩固很有帮助,为J2EE的学习打下基础,适用于...
用Jquery Pagination插件,服务器端用ASP.NET MVC3做的一个分页实例,详见:http://hi.baidu.com/tz666/item/7b401707a3e76fdb73e676d4
本系统中的购物车功能设计、io流读写图片存放本地、订单导出、“echarts插件实现订单信 息统计、后台批量操作、pagehelper实现分页等细节值得 学习。 二、项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + ...