最近在接触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 无刷新分页 详细实例的更多相关文章

  1. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

  2. ajax实现的无刷新分页代码实例

    一.html代码部分: <table class="table style-5">   <thead id="t_head">     ...

  3. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  4. 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...

  5. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  6. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  7. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  8. Ajax+Asp.Net无刷新分页

    1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...

  9. jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. navicat for mysql (10038)如何解决,远程无法连接问题

    ubuntu server下安装了MySQL 5.5数据库,然后在windows下通过Navicat for MySQL连接时,出现 Can't connect to mysql server on ...

  2. 图片轮换cycle插件的运用

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

  3. android的进度条使用

    android的进度条 1.实现的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding= ...

  4. Oracle读取和修改数据块的过程 专家

    http://blog.itpub.net/18841027/viewspace-1649618/

  5. 用antlr文法编写的hermit swrl规则(分享）

    /* * To change this license header, choose License Headers in Project Properties. * To change this t ...

  6. Service的启动与停止、绑定与解绑

    ---恢复内容开始--- Service的意义就在于当软件停止之后还可以在背景中进行运行,换句话也就是说,比如一个音乐播放器,当我们退出音乐播放器的时候,还是希望它在背景中运行,也就是一直播放着音乐, ...

  7. Android_listView_Listener

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  8. [置顶] c++类的继承(inheritance)

    在C++中,所谓"继承"就是在一个已存在的类的基础上建立一个新的类.已存在的类(例如"马")称为"基类(base class )"或&quo ...

  9. 实例化的两种方法（new和函数法）

    // 定义类 类名字是 classA  function classA(){      this.b=1;  }  classA.prototype.b=44;  classA.prototype.s ...

  10. 关于SWT中的布局Layout

    组件装在容器里,那么这些组件是如何布局的呢?在这之前所有的例子都是使用setBounds来 进行绝对坐标的定位的. 在实际应用过程中大都是采用布局管理器的方式来布局容器中的组件. 布局管理器定义了组件 ...