今天我们要用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. python实现二分查找与冒泡排序

    二分查找,代码如下: def binarySearch(l, t): low, high = 0, len(l) - 1 while low < high: 'print low, high' ...

  2. C++ 头文件系列(map)

    简介 该头文件包含两个概念相似的容器----map.multimap. 而这两个容器反映的概念就是 映射. 这两个容器 相同 的属性有: 关联性 映射 动态增长 键(Key)唯一性 这两个不相同的属性 ...

  3. 【ci框架基础】之部署百度编辑器

    在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将uedi ...

  4. Div.2 C. Dasha and Password

    C. Dasha and Password time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  5. Professional C# 6 and .NET Core 1.0 - 38 Entity Framework Core

    本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 38 Entity Framework ...

  6. CentOS 7 网卡命名修改为ethx格式

    Linux 操作系统的网卡设备的传统命名方式是 eth0.eth1.eth2等,而 CentOS7 提供了不同的命名规则,默认是基于固件.拓扑.位置信息来分配.这样做的优点是命名全自动的.可预知的,缺 ...

  7. [译] AR SDK的种类比你想得要多！这里介绍七个棒棒哒

    作者:Eddie Offermann 原文:There are dozens more Augmented Reality SDKs than you think! Here are seven gr ...

  8. HUST 1584 摆放餐桌

    1584 - 摆放餐桌 时间限制:1秒 内存限制:128兆 609 次提交 114 次通过 题目描述 BG准备在家办一个圣诞晚宴,他用一张大桌子招待来访的客人.这张桌子是一个圆形的,半径为R.BG邀请 ...

  9. 读书笔记 effective c++ Item3 在任何可能的时候使用 const

    Const可以修饰什么?   Const 关键字是万能的,在类外部,你可以用它修饰全局的或者命名空间范围内的常量,也可以用它来修饰文件,函数和块作用域的静态常量.在类内部,你可以使用它来声明静态或者非 ...

  10. PickerController 添加照片---iOS

    前言 添加照片我们常用的地方有,更换头像,发布状态,朋友圈的时候等等,那我们接下来看看怎么添加上照片吧~ github: 效果图: 正文 1.你可以直接写,也可以声明一个属性.我习惯声明一个属性. @ ...