今天我们要用ajax做一个分页：

实现Ajax分页：

如果可以的话加上查询条件

  1. 找一张表做分页
  2. 分页不使用page类
  3. 页面不用刷新
  4. Ajax加载数据
 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>Document</title>

     <script src="jquery-1.11.2.min.js"></script>

 <style type="text/css">

 .dangqian{ background-color:#69F}

 </style>

 </head>

 <body>

 <div>

     <input type="text" id="key" />

     <input type="button" value="查询" id="chaxun" />

 </div>

 <table width="50%" border="1" bordercolordark="0" bordercolorlight="0">

     <tr>

         <td>代号</td>

         <td>名称</td>

         <td>父级代号</td>

     </tr>

     <tbody id="neirong"><!--显示内容-->

     </tbody>

 </table>

 <div id="fenyexinxi">

 </div>

 </body>

 <script type="text/javascript">

     var page = 1;//定个变量，当前要显示的页

     Load();//加载数据

     Loadfenyexinxi();//加载分页信息

     //查询

     $("#chaxun").click(function(){

         page = 1;

         Load();//加载数据

         Loadfenyexinxi();//加载分页信息

     })

     function Load()

     {

         var key = $("#key").val();//查询条件。用户输入的内容

         $.ajax({

             url:"chuli.php",

             data: {

             page: page,

             key: key

         },//传2个参数一当前页2关键字也就是查询条件

             type:"POST",

             dataType:"JSON",

             success: function(data){//匿名函数

                     var str = "";//这个将来要放表格显示的

                     for(var k in data)//通过K可以获得每一条数据

                     {//加载数据完成

                         str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号

                     }

                     $("#neirong").html(str);

             }

         });

     }

 function Loadfenyexinxi()//分页信息

 {

     var str = "";

     var minys = 1;//最小页数

     var maxys = 1;//最大页数

     var key = $("#key").val();//取关键字用于传到zys页面用

     $.ajax({

         async:false,

         type:"POST",

         url:"fenye.php",

         data:{key:key},

         dataType:"TEXT",

         success:function(d){

                 maxys = d;

         }

     });

     str += "<span style='text-decoration:underline; cursor:pointer'>总共："+maxys+"页</span>  ";

     str += "<span id='prev' style='text-decoration:underline; cursor:pointer'>上一页</span>";

     for(var i=page-2;i<page+3;i++)

     {

         if(i>=minys && i<=maxys)

         {

             if(i==page)

             {

                 str += "<span style='text-decoration:underline; cursor:pointer' class='dangqian' bs='"+i+"'>"+i+"</span>  ";

             }

             else

             {

                 str += "<span style='text-decoration:underline; cursor:pointer' class='list' bs='"+i+"'>"+i+"</span>  ";

             }

         }

     }

     str += "<span style='text-decoration:underline; cursor:pointer' id='next'>下一页</span>";

     $("#fenyexinxi").html(str);

     $("#prev").click(function(){

             page = page-1;

             if(page<1)

             {

                 page=1;

             }

             Load();

             Loadfenyexinxi();

         })

     $("#next").click(function(){

             page = page+1;

             if(page>maxys)

             {

                 page=maxys;

             }

             Load();

             Loadfenyexinxi();

         })

     $(".list").click(function(){

             page = parseInt($(this).attr("bs"));

             Load();

             Loadfenyexinxi();

         })

 }

 </script>

 </html>

上面是这页面：test.php

 <?php

 include("DBDA.class.php");

 $db = new DBDA();

 //把上个页面的2个值传过来

 $page = $_POST["page"];//当前页

 $key = $_POST["key"];//条件，关键字

 $num = 20;//定义，一页里多少条数据，

 $tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条

 //写$SQL语句

 $sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiaoshu},{$num}";//根据关键字查like '%{$tiaojian}%'。

 echo $db->JSONQuery($sql);

上面是处理页面：chuli.php:

 <?php

 include("DBDA.class.php");

 $db = new DBDA();

 $key = $_POST["key"];

 $num = 20;

 $sql = "select count(*) from chinastates where areaname like '%{$key}%'";

 $zts = $db->StrQuery($sql);

 echo ceil($zts/$num);

上面是分页页面：fenye.php

下面就是我们的显示效果：

随着点击下一页，下面会显示5页，并且是当前页左右各两个页面，每页的显示信息条数可以自己调整。

在上方的文本框中输入关键词会显示出相关的信息。这就是我们用ajax做的分页。

用ajax实现不刷新分页的更多相关文章

  1. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  2. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  3. javascript项目实战---ajax实现无刷新分页

    分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...

  4. ajax实现无刷新分页效果

    基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

  5. Ajax做无刷新分页

    1.主页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  7. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  8. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  9. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

随机推荐

  1. 理解FMS中的实例

    FMS服务器端安装后,唯一需要注意的是设置端口,默认的访问端口是1935和80,如果服务器上安装了IIS提供 WEB服务,那么需要将80修改为其他端口如8080,否则,IIS将会无法工作.如果愿意,也 ...

  2. [Machine Learning] 深度学习中消失的梯度

    好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...

  3. HTML5行业现状与未来 - 2016年终大盘点

    * { margin: 0; padding: 0 } .con { width: 802px; margin: 0 auto; text-align: center; position: inher ...

  4. 内功心法 -- java.util.ArrayList<E> (5)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  5. js DOM操作---登录例子总结

    简单的总结下用 javascript DOM 实现简易登录框例子,下面是简单的模拟登录,没有具体的登录样子,但只是模拟,整理下思路. 页面简单布局,我这个确实太简单了,看代码: <body> ...

  6. 一步一步在Windows中使用MyCat负载均衡 下篇

    之前在 一步一步在Windows中使用MyCat负载均衡 上篇 中已经讲了如何配置出MyCat.下面讲其相关的使用. 五.配置MyCat-eye 对于MyCat监控官网还提供一个MyCat-eye w ...

  7. 将vim打造成php的IDE开发环境

    将vim打造成IDE开发环境 本文主要介绍将vim打造成IDE开发环境,如代码补全,高亮显示,函数跳转,函数自动注释等 首先介绍2款VIM插件管理器:Vbundle,Pathogen 本文中的vim插 ...

  8. C++测试利器--google test开源测试框架

    资料 偶然发现了google的测试框架gtest,马上试了下,效果挺不错,特别是对于写c++的人来说,方便很多.以前自己写c++的模块,通常是写好了模块后再另外定义些函数,然后在函数里面写测试用例来测 ...

  9. jQuery DataTable 删除数据后重新加载

    问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累 ...

  10. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...