今天我们要用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. Spring aop:decare-parent 为类增加新的方法

    Spring aop:decare-parent 为类增加新的方法: 使用XML配置的方式: XML: <?xml version="1.0" encoding=" ...

  2. request.setAttribute和request.getAttribute还有session.setAttribute和session.getAttribute还有request.getParameter和request.getAttribute区别和联系

    1.session.setAttribute()和session.getAttribute()配对使用,作用域是整个会话期间,在所有的页面都使用这些数据的时候使用. 2.request.setAttr ...

  3. Crystal框架配置参数加载机制详解？

    前言 定义 配置参数定义的形式 配置参数文件定义在哪里? 配置参数加载的优先级 如何使用配置参数? 最佳实践 Jar项目中如何定义配置参数? War项目中如何定义或重载Jar包中的配置参数? 开发人员 ...

  4. java连接ms sql server各类问题解析

    首先先来说下使用微软自己开发的架包进行ms sql server数据库的连接时,sql 2000与sql 2005的连接方式略有不同: 1.首先驱动不一样,sql 2000的连接驱动包有三个,分别是: ...

  5. WPF开发进阶 - Fody/PropertyChanged（一）

    INotifyPropertyChanged 在WPF MVVM模式开发中,实现INotifyPropertyChanged的ViewModel是非常重要且常见的类: public class Mai ...

  6. Convex Hull 实现理论+自制Python代码

    Convex Hull 概述 计算n维欧式空间散点集的凸包,有很多的方法.但是如果要实现快速运算则其难点在于:如何快速判断散点集的成员是否是在凸集的内部.如果可以简化判断的运算过程,则可以极大简化迭代 ...

  7. 运行gpg --gen-key生成key时出现卡住的问题

    背景 在搭建Ubuntu16.04的本地apt源时,需要运行"gpg --gen-key"命令,但是在执行该命令时,出现了:"Not enough random byte ...

  8. js设计模式--工厂模式

    工厂模式: 工厂模式的目的是为了创建对象,它经常是在类和类的方法中实现.简单的工厂模式是由一个方法来决定到底要创建哪类的实例,这些实例经常拥有相同的接口,这种模式在所实例化的类型在编译期并不确定,而是 ...

  9. 纪中集训 Day 3

    这几天一直坚持写blog= =加油吧！！ 早上醒来，说了"我要AK"(其实只是蒟蒻的妄想罢了QAQ) 然后为了不立flag，改成了我要rank 1 然后依旧是有一题不会做QAQ 好 ...

  10. block循环饮用解决

    在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> val ...