首页 / JQUERY / jqueryajaxphp+mysql无刷新分页详细实例_PHP教程

jqueryajaxphp+mysql无刷新分页详细实例_PHP教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jqueryajaxphp+mysql无刷新分页详细实例_PHP教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12594字，纯文字阅读大概需要18分钟。

内容图文

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

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

<span  1 <span <span DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<span  2 <span <<span html <span xmlns<span ="http://www.w3.org/1999/xhtml"
<span  3 <span <<span head
<span  4 <span <<span meta <span http-equiv<span ="Content-Type"<span  content<span ="text/html; charset=utf-8" 
<span  5 <span <<span titlephp+mysql+ajax+jquery分页<span </<span title
<span  6 
<span  7 <span <<span script <span type<span ="text/javascript"<span  src<span ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</<span script
<span  8 <span <<span script <span type<span ="text/javascript"<span  src<span ="ajaxPager.js"</<span script
<span  9 <span <<span style
<span 10 <span     #main<span {
<span 11 <span         width<span :<span 980px<span ;
<span 12 <span         margin<span :<span 0px auto<span ;
<span 13     <span }
<span 14 <span     ul
<span 15     <span {
<span 16 <span         list-style<span :<span none<span ;
<span 17 <span         margin<span :<span 0px<span ;
<span 18     <span }
<span 19 <span     #list li<span {
<span 20 <span         width<span :<span 220px<span ;
<span 21 <span         height<span :<span 280px<span ;
<span 22 <span         float<span :<span left<span ;
<span 23 <span         margin-left<span :<span 10px<span ;
<span 24     <span }
<span 25 <span     .pager .cur <span {
<span 26 <span         border-top-color<span :<span  rgb(255, 255, 255)<span ;
<span 27 <span         border<span :<span  1px solid #fff<span ;
<span 28 <span         background<span :<span  0<span ;
<span 29 <span         font-weight<span :<span  bold<span ;
<span 30 <span         color<span :<span  #000<span ;
<span 31     <span }
<span 32 <span     .pager a, .pager span <span {
<span 33 <span         margin-top<span :<span  5px<span ;
<span 34     <span }
<span 35 <span     .pager a, .pager span <span {
<span 36 <span         background<span :<span  none repeat scroll 0 0 #fff<span ;
<span 37 <span         border<span :<span  1px solid #e7ecf0<span ;
<span 38 <span         color<span :<span  #0000cd<span ;
<span 39 <span         float<span :<span  left<span ;
<span 40 <span         height<span :<span  22px<span ;
<span 41 <span         line-height<span :<span  22px<span ;
<span 42 <span         margin-right<span :<span  5px<span ;
<span 43 <span         overflow<span :<span  hidden<span ;
<span 44 <span         text-align<span :<span  center<span ;
<span 45 <span         text-decoration<span :<span  none<span ;
<span 46 <span         width<span :<span  auto<span ;
<span 47 <span         padding<span :<span  0 8px<span ;
<span 48     <span }
<span 49 <span     .pager span <span {
<span 50 <span         background<span :<span  none repeat scroll 0 0 #fff<span ;
<span 51 <span         border<span :<span  1px solid #e7ecf0<span ;
<span 52 <span         color<span :<span  #0000cd<span ;
<span 53 <span         float<span :<span  left<span ;
<span 54 <span         height<span :<span  22px<span ;
<span 55 <span         line-height<span :<span  22px<span ;
<span 56 <span         margin-right<span :<span  5px<span ;
<span 57 <span         overflow<span :<span  hidden<span ;
<span 58 <span         text-align<span :<span  center<span ;
<span 59 <span         text-decoration<span :<span  none<span ;
<span 60 <span         width<span :<span  auto<span ;
<span 61 <span         padding<span :<span  0 8px<span ;
<span 62     <span }
<span 63 <span     .pager <span {
<span 64 <span         border-top<span :<span  0<span ;
<span 65 <span         padding<span :<span  12px 0 30px 15px<span ;
<span 66 <span         float<span :<span  left<span ;
<span 67     <span }
<span 68 <span     .clearfix <span {
<span 69 <span         display<span :<span  block<span ;
<span 70     <span }
<span 71 <span     .pager <span {
<span 72 <span         float<span :<span  left<span ;
<span 73 <span         font-family<span :<span  Arial<span ;
<span 74 <span         font-size<span :<span  13px<span ;
<span 75     <span }
<span 76 <span     .clearfix <span {
<span 77 <span     zoom<span :<span  1<span ;
<span 78     <span }
<span 79 <span </<span style
<span 80 
<span 81 
<span 82 <span </<span head
<span 83 
<span 84 <span <<span body
<span 85 
<span 86 
<span 87     <span <<span div <span id<span ="main"
<span 88         <span <<span div <span id<span ="pagecount"<span  class<span ="pager clearfix"</<span div<<span div <span id<span ="loading"</<span div
<span 89         <span <<span br 
<span 90         <span <<span br 
<span 91         <span <<span br 
<span 92         <span <<span br 
<span 93         <span <<span div <span id<span ="list"
<span 94             <span <<span ul</<span ul
<span 95         <span </<span div
<span 96     <span </<span div
<span 97 <span </<span body
<span 98 <span </<span html

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

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

<span   1 <span var curPage = 1; <span //<span 当前页码
<span   2 <span var<span  total,pageSize,totalPage;
<span   3 <span //<span 获取数据
<span   4 <span function<span  getData(page){ 
<span   5 <span     $.ajax({
<span   6         type: 'POST'<span ,
<span   7         url: 'pages.php'<span ,
<span   8         data: {'pageNum':page-1<span },
<span   9         dataType:'json'<span ,
<span  10         beforeSend:<span function<span (){
<span  11             $("#loading").html(""<span );
<span  12 <span         },
<span  13         success:<span function<span (json){
<span  14             $("#loading").html(""<span );
<span  15             $("#list ul"<span ).empty();
<span  16             total = json.total; <span //<span 总记录数
<span  17             pageSize = json.pageSize; <span //<span 每页显示条数
<span  18             curPage = page; <span //<span 当前页
<span  19             totalPage = json.totalPage; <span //<span 总页数
<span  20             <span var li = ""<span ;
<span  21             <span var list =<span  json.list;
<span  22             $.each(list,<span function(index,array){ <span //<span 遍历json数据列
<span  23                 li += "<img src='https://www.gxlcms.com/"+array['pic']+"'>https://www.gxlcms.com/"+array['title'].substring(0,10)+""<span ;
<span  24 <span             });
<span  25             $("#list ul"<span ).append(li);
<span  26 <span         },
<span  27         complete:<span function(){ <span //<span 生成分页条
<span  28 <span             getPageBar();
<span  29 <span         },
<span  30         error:<span function<span (){
<span  31             alert("数据加载失败"<span );
<span  32 <span         }
<span  33 <span     });
<span  34 <span }
<span  35 
<span  36 <span //<span 获取分页条
<span  37 <span function<span  getPageBar(){
<span  38     <span //<span 页码大于最大页数
<span  39     <span if(curPage>totalPage) curPage=<span totalPage;
<span  40     <span //<span 页码小于1
<span  41     <span if(curPage<1) curPage=1<span ;
<span  42     pageStr = "共"+total+"条"+curPage+"/"+totalPage+""<span ;
<span  43     
<span  44     <span //<span 如果是第一页
<span  45     <span if(totalPage<=4<span )
<span  46 <span     {
<span  47         <span if(curPage==1<span ){
<span  48             pageStr += "1"<span ;
<span  49             <span for(<span var i=2;i<=totalPage;i++<span )
<span  50 <span             {
<span  51                 pageStr += ""+i+""<span ;
<span  52 <span             }
<span  53         }<span else<span {
<span  54             pageStr += "<<<"<span ;
<span  55             <span for(<span var i=1;i<=totalPage;i++<span )
<span  56 <span             {
<span  57                 <span if(i==<span curPage)
<span  58 <span                 {
<span  59                     pageStr += ""+i+""
<span  60 <span                 }
<span  61                 <span else
<span  62 <span                 {
<span  63                     pageStr += ""+i+""<span ;
<span  64 <span                 }
<span  65 <span             }
<span  66             
<span  67 <span         }
<span  68 <span     }
<span  69     <span else<span //<span 当页数大于5的时候就要这样显示1 2 3 4 ...
<span  70 <span     {
<span  71         <span if(curPage<=3<span ){
<span  72             <span if(curPage==1<span )
<span  73 <span             {
<span  74                 pageStr += "1"<span ;
<span  75 <span             }
<span  76             <span else
<span  77 <span             {
<span  78                 pageStr += "<<<"<span ;
<span  79                 pageStr += "1"<span ;
<span  80 <span             }
<span  81             <span for(<span var i=2;i<=4;i++<span )
<span  82 <span             {
<span  83                 <span if(i==<span curPage)
<span  84 <span                 {
<span  85                     pageStr += ""+i+""
<span  86 <span                 }
<span  87                 <span else
<span  88 <span                 {
<span  89                     pageStr += ""+i+""<span ;
<span  90 <span                 }
<span  91 <span             }
<span  92             pageStr += "..."<span ;
<span  93         }<span else<span {
<span  94             pageStr += "<<<"<span ;
<span  95             pageStr += "..."<span ;
<span  96             <span if(curPage>totalPage-2<span )
<span  97 <span             {
<span  98                 <span for(<span var i=totalPage-2;i<=totalPage;i++<span )
<span  99 <span                 {
<span 100                     <span if(i==<span curPage)
<span 101 <span                     {
<span 102                         pageStr += ""+i+""
<span 103 <span                     }
<span 104                     <span else
<span 105 <span                     {
<span 106                         pageStr += ""+i+""<span ;
<span 107 <span                     }
<span 108 <span                 }
<span 109 <span             }
<span 110             <span else
<span 111 <span             {
<span 112                 pageStr += ""+(curPage-1)+""<span ;
<span 113                 pageStr += ""+curPage+""<span ;
<span 114                 pageStr += ""+(parseInt(curPage)+1)+""<span ;
<span 115                 pageStr += "..."<span ;
<span 116 <span             }
<span 117 <span         }
<span 118 <span     }
<span 119     <span //<span 如果是最后页
<span 120     <span if(curPage>=<span totalPage){
<span 121         <span //<span pageStr += ">   >>";
<span 122     }<span else<span {
<span 123         pageStr += ">>>"<span ;
<span 124 <span     }
<span 125         
<span 126     $("#pagecount"<span ).html(pageStr);
<span 127 <span }
<span 128 
<span 129 $(<span function<span (){
<span 130     getData(1<span );
<span 131     $("#pagecount  a").live('click',<span function<span (){
<span 132         <span var rel = $(<span this).attr("rel"<span );
<span 133         <span if<span (rel){
<span 134 <span             getData(rel);
<span 135 <span         }
<span 136 <span     });
<span 137 });

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

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

<span  1  ('connect.php' 
  = (['pageNum' 
  = ("select id from food"  = ();
 
  = 8; 
  = (/); 
 
  = * ['total'] =  ['pageSize'] =  ['totalPage'] =   = ("select id,title,pic from food order by id asc limit ," (=(      ['list'][] =           'id' => ['id'],
         'title' => ['title'],
         'pic' => ['pic'],
   
  json_encode( ?>

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

<span  1  ('connect.php' 
  = (['pageNum' 
  = ("select id from food"  = ();
 
  = 8; 
  = (/); 
 
  = * ['total'] =  ['pageSize'] =  ['totalPage'] =   = ("select id,title,pic from food order by id asc limit ," (=(      ['list'][] =           'id' => ['id'],
         'title' => ['title'],
         'pic' => ['pic'],
   
  json_encode( ?>

　　然后就完成了，具体思路很清晰，点击页数的时候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

http://www.bkjia.com/PHPjc/440223.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/440223.htmlTechArticle最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清...

内容总结

以上是互联网集市为您收集整理的jqueryajaxphp+mysql无刷新分页详细实例_PHP教程全部内容，希望文章能够帮你解决jqueryajaxphp+mysql无刷新分页详细实例_PHP教程所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/171803.html

来源：【匿名】

【上一篇】js+jquery无限极联动_PHP教程【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jqueryajaxphp+mysql无刷新分页详细实例_PHP教程】教程文章相关的互联网学习教程文章

jQuery+AJAX实现网页无刷新上传【代码】

新年礼，提供简单、易套用的 jQuery AJAX上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。因...

jQuery AJAX 网页无刷新上传示例【代码】【图】

新年礼，提供简单、易套用的 jQuery AJAX 上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。因...

使用Jquery的Ajax实现无刷新更新，修改，删除页面【代码】【图】

原文:使用Jquery的Ajax实现无刷新更新，修改，删除页面　　本文将向大家讲述一下最近工作的一些总结，主要包括了以下内容，注册界面以及详细信息界面的编辑。主要是介绍了AJAX技术，因为我觉得其他方面没什么好介绍的。首先是跟大家说一下Ajax的优点，假如你删除了一个页面的内容，你想当于点击了一个按钮，那么这个页面必然发生了回发事件，也就是说，你的页面必然被刷新了一次。以下是我从网上找来的一张Ajax的原理图，本人PS技术...

jquery+ajax+C#实现无刷新操作数据库数据的简单实例

我们知道同步执行和异步执行的区别，为了更好的提高用户的体验，我们都会采用异步方式去处理一些问题，毕竟单线程的同步可能回造成卡死等现象，很不友好，所以可以使用ajax来完成用户的体验，现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容我们只是单方面的获取内容，分页等就不考虑了，后期会讲到无刷新的分页页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif" title="...

php结合jQuery的ajax无刷新提交实现点赞功能

本篇文章主要介绍php结合jQuery的ajax无刷新提交实现点赞功能，感兴趣的朋友参考下，希望对大家有所帮助。数据库设计先准备两张表，pic表保存的是图片信息，包括图片对应的名称、路径以及图片“赞”总数，pic_ip则记录用户点击赞后的IP数据。CREATE TABLE IF NOT EXISTS `pic` (`id` int(11) NOT NULL AUTO_INCREMENT,`pic_name` varchar(60) NOT NULL,`pic_url` varchar(60) NOT NULL,`love` int(11) NOT NULL DEFAULT 0,PRIMARY ...

PHP+jQuery实现滚屏无刷新动态加载数据功能的方法

这篇文章主要介绍了PHP+jQuery实现滚屏无刷新动态加载数据功能,涉及php动态读取数据库及加载数据实现滚屏无刷新效果的具体操作技巧,需要的朋友可以参考下具体如下：index.php<?php require_once(connect.php); //连接数据库 $user = array(demo1,demo2,demo3,demo3,<de></de>mo4); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...

javascript-jquery的ajax和php配合使用实现无刷新表单提交的一点问题【图】

如图就是我的页面，打开主页链接后显示的是主体部分（左侧黑框）；右侧子页面（右侧div#main_box内通过ajax获取的子页面）在刚打开主页链接时显示按下按钮一时加载的子页面现在我在按下按钮二时加载的子页面2中有个表单，需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息，返回数据库数据再输出到这个子页面2中，不知道怎么实现。在网上找了好久找到这种方式：但是不会用，请大神赐教回复内容：如图就是我的页面，...

phpjquery实现新闻标签分类与无刷新分页_PHP教程【图】

现在jquery的应用越来越广泛了，在很多网站的新闻板块都实现了标签分类 + 无刷新分页的效果。也自己尝试写了一个，效果图如下（样式可以按用户需求自己去整）：接下来详细介绍实现过程：我一向是见招拆招的解决思路，这里需要运用到3个东西——标签页效果插件和分页插件，jquery的getJson请求。因此我使用了jquery-ui插件，jquery-page插件,现提供下载地址：jquery_all.rar 里面包含了3个JS脚本文件和2个样式表:jquery-1.3....

php+jQuery实现新闻标签分类和无刷新分页_PHP教程【图】

现在jquery的应用越来越广泛了，在很多网站的新闻板块都实现了标签分类 + 无刷新分页的效果。我也自己尝试写了一个，效果图如下（样式可以按用户需求自己去整）：接下来详细介绍实现过程：我一向是见招拆招的解决思路，这里需要运用到3个东西——标签页效果插件和分页插件，jquery的getJson请求。因此我使用了jquery-ui插件，jquery-page插件,请在下面点击文件名下载。里面包含了3个JS脚本文件和2个样式表: jquery-1.3.2.min...

jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟_PHP教程

在很多项目中都会叫用户上传东西这些的，自从接触了jquery 和ajax之后就不管做什么，首先都会想到这个，我这个人呢？是比较重视客户体验的，这次我这边负责的是后台板块，然后就有一块是要求用户上传照片的，当然就想到了无刷新上传了呀，一般的jquery+ajax的话传递给php的data我习惯用json，然后就不知道怎么怎么把$_FILES数组中的内容给php，我要用move_uploaded_file这个函数来吧$_FILES['file']['tmp_name']移动到我想要的位置...