jquery ajax php+mysql 无刷新分页详细实例

　　最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。

　　首先是html页面，index.html，代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>php+mysql+ajax+jquery分页</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 <script type="text/javascript" src="ajaxPager.js"></script>

 <style>

     #main{

         width:980px;

         margin:0px auto;

     }

     ul

     {

         list-style:none;

         margin:0px;

     }

     #list li{

         width:220px;

         height:280px;

         float:left;

         margin-left:10px;

     }

     .pager .cur {

         border-top-color: rgb(255, 255, 255);

         border: 1px solid #fff;

         background: 0;

         font-weight: bold;

         color: #000;

     }

     .pager a, .pager span {

         margin-top: 5px;

     }

     .pager a, .pager span {

         background: none repeat scroll 0 0 #fff;

         border: 1px solid #e7ecf0;

         color: #0000cd;

         float: left;

         height: 22px;

         line-height: 22px;

         margin-right: 5px;

         overflow: hidden;

         text-align: center;

         text-decoration: none;

         width: auto;

         padding: 0 8px;

     }

     .pager span {

         background: none repeat scroll 0 0 #fff;

         border: 1px solid #e7ecf0;

         color: #0000cd;

         float: left;

         height: 22px;

         line-height: 22px;

         margin-right: 5px;

         overflow: hidden;

         text-align: center;

         text-decoration: none;

         width: auto;

         padding: 0 8px;

     }

     .pager {

         border-top: 0;

         padding: 12px 0 30px 15px;

         float: left;

     }

     .clearfix {

         display: block;

     }

     .pager {

         float: left;

         font-family: Arial;

         font-size: 13px;

     }

     .clearfix {

     zoom: 1;

     }

 </style>

 </head>

 <body>

     <div id="main">

         <div id="pagecount" class="pager clearfix"></div><div id="loading"></div>

         <br />

         <br />

         <br />

         <br />

         <div id="list">

             <ul></ul>

         </div>

     </div>

 </body>

 </html>

　　样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。

　　然后就是js代码了，ajaxPager.js，代码如下：

 var curPage = 1; //当前页码

 var total,pageSize,totalPage;

 //获取数据

 function getData(page){

     $.ajax({

         type: 'POST',

         url: 'pages.php',

         data: {'pageNum':page-1},

         dataType:'json',

         beforeSend:function(){

             $("#loading").html("<img id='loadin'g src='loading.gif'>");

         },

         success:function(json){

             $("#loading").html("");

             $("#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']+"'></a><p>"+array['title'].substring(0,10)+"</p></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 class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>";

     //如果是第一页

     if(totalPage<=4)

     {

         if(curPage==1){

             pageStr += "<span class='cur'>1</span>";

             for(var i=2;i<=totalPage;i++)

             {

                 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";

             }

         }else{

             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";

             for(var i=1;i<=totalPage;i++)

             {

                 if(i==curPage)

                 {

                     pageStr += "<span class='cur'>"+i+"</span>"

                 }

                 else

                 {

                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";

                 }

             }

         }

     }

     else//当页数大于5的时候就要这样显示1 2 3 4 ...

     {

         if(curPage<=3){

             if(curPage==1)

             {

                 pageStr += "<span class='cur'>1</span>";

             }

             else

             {

                 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";

                 pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>";

             }

             for(var i=2;i<=4;i++)

             {

                 if(i==curPage)

                 {

                     pageStr += "<span class='cur'>"+i+"</span>"

                 }

                 else

                 {

                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";

                 }

             }

             pageStr += "<span class='cur'>...</span>";

         }else{

             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";

             pageStr += "<span class='cur'>...</span>";

             if(curPage>totalPage-2)

             {

                 for(var i=totalPage-2;i<=totalPage;i++)

                 {

                     if(i==curPage)

                     {

                         pageStr += "<span class='cur'>"+i+"</span>"

                     }

                     else

                     {

                         pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";

                     }

                 }

             }

             else

             {

                 pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>";

                 pageStr += "<span class='cur'>"+curPage+"</span>";

                 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>";

                 pageStr += "<span class='cur'>...</span>";

             }

         }

     }

     //如果是最后页

     if(curPage>=totalPage){

         //pageStr += "<span>></span>   <span>>></span>";

     }else{

         pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>";

     }

     $("#pagecount").html(pageStr);

 }

 $(function(){

     getData(1);

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

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

         if(rel){

             getData(rel);

         }

     });

 });

　　因为项目的需要，我这个页面页数显示只能显示几页，比如就这样 << < ... 5 6 7 ... > >>，要改显示的，就在ajaxPager.js里面改。

　　$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看pages.php中的代码：

 <?php

 include_once('connect.php');

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

 $result = mysql_query("select id from food");

 $total = mysql_num_rows($result);//总记录数

 $pageSize = 8; //每页显示数

 $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'],

      );

 }

 //print_r($arr);

 echo json_encode($arr);

 ?>

　　上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来connect.php：

 <?php

 include_once('connect.php');

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

 $result = mysql_query("select id from food");

 $total = mysql_num_rows($result);//总记录数

 $pageSize = 8; //每页显示数

 $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'],

      );

 }

 //print_r($arr);

 echo json_encode($arr);

 ?>

　　然后就完成了，具体思路很清晰，点击页数的时候jquery获取rel中的页面值，传进去数据库获取相应数据展现在页面上。

　　然后还有数据库吧，我的表示这样的：

1 CREATE TABLE IF NOT EXISTS `food` (

2   `id` int(11) NOT NULL AUTO_INCREMENT,

3   `title` varchar(100) NOT NULL,

4   `pic` varchar(255) NOT NULL,

5   PRIMARY KEY (`id`)

6 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;

我这边有一个demo，然后大家可以下载看看。多多指教。

http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903

jquery ajax php+mysql 无刷新分页详细实例的更多相关文章

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
ajax实现的无刷新分页代码实例
一.html代码部分: <table class="table style-5"> <thead id="t_head"> ...
ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）
1.前言作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
jquery+ajax(用ajax.dll)实现无刷新分页
利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...
Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

Spring Quartz结合Spring mail定期发送邮件
文件配置例如以下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
理解 auto_ptr<T>
1.auto_ptr<T>解决什么问题? 在堆上获取的资源,客户可能会忘记delete,或者由于异常没有执行到delete,导致资源泄漏.在栈上分配的对象,有个特点,不论出现什么情况,超出 ...
Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀和
B. Laurenty and Shop Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/p ...
Android模拟器操作快捷键
你可以通过模拟器的启动选项和控制台命令来控制模拟环境的行为和特性.一旦模拟器启动,你就可以通过键盘和鼠标来“按” 模拟器的按键,从而操作模拟器.下面的表格总结了模拟器按键可键盘按键之间的映射关系. 模 ...
java_泛型 TreeSet 判断hashcode/length(升序排列)
package ming; import java.util.ArrayList; import java.util.Collection; import java.util.Comparator; ...
MySQL之事务隔离级别--转载
转自:http://793404905.blog.51cto.com/6179428/1615550 本文通过实例展示MySQL事务的四种隔离级别. 1 概念阐述 1)Read Uncommitted ...
springMVC学习笔记二
六.springmvc的注解 xml的配置→注解 1.新建一个配置文件还是在config下新建springAnnotation-servlet.xml web.xml 修改初始化为<param ...
css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
Web安全测试周末公开班计划5月24、25日开课，欢迎报名参加！
Web安全测试周末公开班计划5月24.25日开课,欢迎报名参加! 课程大纲参考: http://gdtesting.com/product.php?id=107 报名咨询: 黎小姐 QQ:241448 ...
【转载】架构师需要了解的Paxos原理、历程及实战
原文链接,请参见:http://weibo.com/ttarticle/p/show?id=2309403952892003376258 数据库高可用性难题数据库的数据一致和持续可用对电子商务和互联 ...

jquery ajax php+mysql 无刷新分页 详细实例

jquery ajax php+mysql 无刷新分页 详细实例的更多相关文章

随机推荐

热门专题

jquery ajax php+mysql 无刷新分页详细实例

jquery ajax php+mysql 无刷新分页详细实例的更多相关文章