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

随机推荐

【转】C++ 笔试面试题目
原文:http://blog.csdn.net/txgc1009/article/details/6700830 许多面试题看似简单,却需要深厚的基本功才能给出完美的解答.企业要求面试者写一个最简单的 ...
SharePoint 2013+ Sqlserver 2014 Kerberos 配置传奇, 最终的解决方案验证。
SharePoint 2013+ Sqlserver 2014 Kerberos 配置传奇. 1,安装数据库,我就不多说安装,客户一定要注意. 我将参照以下实施例和账户. 2,建立DNS,假设没有DN ...
UITableViewCell 高度自适应
UITableViewCell 高度自适应一直是我们做动态Cell高度时遇到的最烦躁的问题,Cell动态高度计算可以去看看sunny的这篇文章介绍,今天主要和大家分享下我在使用systemLayout ...
《RESTful Web Services》第二章识别资源
引言:开放RESTful Web服务的首要步骤之一是设计资源模型. 2.1 如何从领域名词中识别资源 2.2 如何选择资源粒度一些因素会影响数据库表和对象模型的设计,例如领域建模.需要高 ...
信号之sigsetjmp和siglongjmp函数
在信号处理程序中经常调用longjmp函数以返回到程序的主循环中,而不是从该处理程序返回. 但是,调用longjmp有一个问题.当捕捉到一个信号时,进入信号捕捉函数,此时当前信号被自动地加到进程的信号 ...
带缓冲I/O和不带缓冲I/O的区别与联系
转自:http://blog.csdn.net/lmh12506/article/details/6803847 首先要明白不带缓冲的概念:所谓不带缓冲,并不是指内核不提供缓冲,而是只单纯的系统调用, ...
Jordan Lecture Note-8: The Sequential Minimal Optimization Algorithm (SMO).
The Sequential Minimal Optimization Algorithm (SMO) 本文主要介绍用于解决SVM对偶模型的算法,它于1998年由John Platt在论文“Seque ...
【大坑】DataGridView多线程更新修改Cell单元格卡死
最新发现是Column的AutoSizeMode设置为AllCell调整宽度而造成的卡顿,还有就是在现在里面使用Invoke用匿名函数闭包的形式访问For循环的i变量值会不正确导致找不到索引而造成卡顿 ...
Java基础知识强化100：JVM 内存模型
一. JVM内存模型总体架构图: 方法区和堆由所有线程共享,其他区域都是线程私有的二. JVM内存模型的结构分析: 1. 类装载器(classLoader) 类装载器,它是在java虚拟机中用途是 ...
MySQL（16）：Select-union（联合查询）
1. Select-union(联合查询) union用于把来自许多SELECT语句的结果组合到一个结果集合中. 用法: SELECT ...UNION [ALL | DISTINCT]SELECT ...

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

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

随机推荐

热门专题

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

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