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). 有时做一个网站项目 ...

随机推荐

在与SQL Server建立连接时出现与网络相关的或特定于实例的错误
向往前一样.学习牛腩新闻公布系统的视频,写程序,打开数据库.出现一个框框,具体内容例如以下: 数据库连接不上.全部的工作都要歇班,捣鼓了会儿,简单总结一下解决该问题的方法. 首先:第一步,程序--SQ ...
C++ 构造过程和析构过程
1.C++构造和析构的过程,类似于穿衣脱衣的过程.穿衣是:先穿内衣,再穿外套.脱衣是:先脱外套,再脱内衣.C++构造过程:首先调用父类构造方法,再调用子类构造方法.C++析构过程:首先调用子类析构方法 ...
Sublime Text 超好用的侧栏插件SideBarEnhancements
SideBarEnhancements插件有效地改进了Sublime Text的侧边栏.安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开.新建文件.新建文件夹.以…打开.在浏览器中 ...
zoj 3820 Building Fire Stations 树的中心
Building Fire Stations Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge ...
戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录
瞎扯:笔记本刚买不久就想装ubuntu来着,但结果发现BIOS启动方式为UEFI,网上一搜索发现跟曾经的双系统安装方法不一样,看详细教程感觉相当复杂,并且也有点操心折腾跪了这新本本所以一直没有动手.但 ...
【每日一摩斯】-【序列】-续-RAC and Sequences (853652.1)
一个简单的sequence有什么可以说的呢?如果再这样认为就大错特错了... 也许以下几点高人们都很清楚,但至少对于我来说,之前是陌生的,或者说是忽略的. 1.CREATE SEQUENCE seq; ...
ios开发——笔记篇
:开关 BOOL isopen = !isopen; //View @property (nonatomic, assign) BOOL open;//模型属性 self.group.open = ! ...
ajax调用webService中的方法
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx. ...
linux之ubuntu下php环境配置
本文主要说明如何在Ubuntu下配置PHP开发环境LAMP. Ubuntu 搭建 php 环境所谓LAMP:Linux,Apache,Mysql,PHP 安装 Apache2:(注意可以 ...
Dubbo架构设计详解--转载
原文地址:http://shiyanjun.cn/archives/325.html Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解 ...

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

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

随机推荐

热门专题

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

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