今天我们要用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. Flex移动应用程序开发的技巧和窍门(二)

    范例文件 flex-mobile-dev-tips-tricks-pt2.zip 这是关于Flex移动应用程序开发的技巧和窍门的一系列文章中的第二部分.第一部分 内容主要集中讨论了视图之间以及应用程序 ...

  2. 马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别

    马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别 http://martinfowler.com/articles/injection.html 中文翻译:http://files ...

  3. CI Weekly #12 | 微信小程序的自动化测试进阶

    岁末将至,站在年终冲刺的尾巴上,flow.ci 新增了个人和团队设置的功能: 上线团队功能,注册时默认创建一个与用户名一致的团队,可设置:团队名称.增减团队成员,后续会不断完善: 增加个人设置,可修改 ...

  4. mac下sublime 配置查看源码

    sublime及package control的安装查看之前一篇文章:http://www.cnblogs.com/xdwa/p/5805101.html 安装ctags 安装完毕package co ...

  5. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  6. ubuntu下php编译

    1.安装依赖 sudo apt-get install libjpeg-devsudo apt-get install libxml2-devsudo apt-get -y install libjp ...

  7. 服务器部署项目出现问题：Unsupported major.minor version 52.0

    问题描述: 编写一个web 前置服务,使用ant编译项目,将项目部署到服务器上,启动时报此错误:Unsupported major.minor version 52.0 网上给出错误原因是服务器安装的 ...

  8. JS Proptotyp以及__proto__

    一直以来都特别疑惑js原型链的只是,每次看到类似的文章也是迷迷糊糊,今天终于有点小的感悟,记录下来 在JS中一切都是对象,而通过其它的面向对象语言,对象又是类型的实例,所以类型和对象是不同的,那么在j ...

  9. 用css改变console.log的输出样式

    console.log允许你通过css来格式化输出,格式如下: console.log('%c字符串[%c字符串]', 样式1, [样式2]) 其中"%c"为模板字符串 例子: 1 ...

  10. iOS 启动页后广告Demo

    重点! 对于启动页后的广告,相信大家也都看到过很多很多的,比如我自己常看到的有 QQ音乐,爱奇艺了.你点击了APP,它会启动就会随之启动..其实这些APP的启动页是没有消失的,你去认真的观察一下!所以 ...