(1)先写个显示数据的页面,分页查询需要那几个部分呢?

1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧

1
2
3
4
<div>
<input type="text" id="key" />  //输入查询字的文本框
<input type="button" value="查询" id="chaxun" />  //查询按钮,起名字是为了以后给这个按钮加事件,因为只有点击了才可以将文本框的内容进行查询
</div>

看下效果:

2.接下来就是显示数据了,显示数据必然是要查数据库了,就要用到ajax的方法

先将jQuery的包引入这个显示数据的页面

1
<script src="../jquery-1.11.2.min.js"></script>  //引入jQuery的包

编写想要显示的列的内容,自然是要写表了,写一行,行中有单元格放想要显示内容的字段名(这里显示3种信息)

1
2
3
4
5
6
7
8
9
10
11
12
<table width="50%" border="1" cellpadding="0" cellspacing="0">
  <tr><br>    //显示的字段名,这是第一行的内容
        <td>代号</td>
        <td>名称</td>
        <td>父级代号</td>
  </tr>
   
  <tbody id="bg>
<br>  //这里放的就是查找数据库的内容了
    </tbody>
     
</table>

现在还没有查看数据库,但是可以先看下显示效果:

3.现在可以先来查数据库了,这里就要用到ajax了

3.1不过既然是要分页显示,那么会有个默认的第一页,可以先定个变量

1
var page = 1; //当前页

3.2然后开始写ajax,查询一下数据库了,但是这个会常用到,避免再写很多遍,我们可以写一个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Load()
{
  var key = $("#key").val(); //查询条件:因为会用到查询
     
  $.ajax({
    url:"fenye_chuli.php"//显示数据的处理页面
    data:{page:page,key:key}, //页数和查询都要传值
    type:"POST",
    dataType:"JSON", //这里我们用JSON的数据格式
    success: function(data){
        //执行完处理页面后写代码
        }
    });
}

3.3再写显示数据的处理页面,这里要考虑的是跳过多少条数据还有想要显示多少条数据

1
2
3
4
5
6
7
8
9
10
11
12
<?php
include("DBDA.class.php");  //调用封装好的类
$db = new DBDA();  //造新对象
 
$page = $_POST["page"]; //传值页数
$key = $_POST["key"]; //传值关键字<br>
$num = 20;  //每页想要显示的数据条数
$tiao = ($page-1)*$num//显示的当前跳过多少条数据
//查询表中模糊查询名称是关键字,分页是跳过多少条,显示多少条数据
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";
//执行sql语句
echo $db->JSONQuery($sql);   //调用的是写好的JSON数据格式的处理方式

JSON数据格式是关联数组,所以要进行处理一下,将处理方式封装成类就好

在“AJAX中的dataType(数据格式)-text、json”中写到过处理方式 

3.4处理页面结束后,就是要写ajax中执行完处理页面后写代码(注意:上面用的是JSON的数据格式,所以要注意字段名要和数据库中的一样,还有就是他是关联数组)

1
2
3
4
5
6
7
8
success: function(data){
    var str = "";
    for(var k in data)
    {<br>       //循环显示的代号、名称、父级代号
      str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
    }
    $("#bg").html(str); //将内容放大显示这些数据的地方
}

这样就把想要显示的数据放到bg中了,记得这个方法调用一下

到此就是显示数据了,但是这样没法实现分页,所以还需要分页,这里就是要放数字了,但是也是需要遍历的,随意放空的就可以

1
2
3
<div id="xinxi">
  //显示数字或是上一页
</div>

3.5这个也是可以写成个方法,然后调用

要知道最大能显示多少页,这里可以先定义一个默认最大数,这个最大数也可以是搜索关键字时显示的最大页数

1
var maxys = 1;

找到关键字的值

1
var key = $("#key").val();

然后就是写ajax了,查总页数

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    async:false,  //因为这个是要同步执行的,所以值是false
    url:"fenye_zys.php"//处理页面
    data:{key:key},  //想要传的值
    type:"POST"//传值方式
    dataType:"TEXT", //这里可以用TEXT字符串的方式
    success: function(d){
            //处理页面结束后的语句
    }
});
    

接下里就是写处理信息的处理页面了

1
2
3
4
5
6
7
8
9
10
11
12
<?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); //转换成整数

处理页面执行结束后,就要把查到的最大页数交个默认的最大页数

1
2
3
success: function(d){
    maxys = d;  //将执行结果交给定义的最大页数
}

这样之后就是要有“上一页”“下一页”,中间的数可以让他每次显示5条

1
2
3
4
str += "<span>总共:"+maxys+"页</span>  ";
str += "<span id='prev'>上一页</span>"//后面要用到单击事件的,在这起个名字
//循环的当前页
str += "<span id='next'>下一页</span>"; //这个也是要用点击事件的也要起名字

然后再是写循环的页数了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for(var i=page-2;i<page+3;i++)  //前后显示2个
{
  if(i>=minys && i<=maxys)  //页数是要有范围的,大于最小页数,小于最大页数
  {
    if(i==page)
    {
      str += "<span class='dangqian' bs='"+i+"'>"+i+"</span>  "//当前页选中
    }
     else
     {
      str += "<span class='list' bs='"+i+"'>"+i+"</span>  "//显示当前页
     }
         
  }
}   

将值传送到div的xinxi处

1
$("#xinxi").html(str);

最后结果如下图显示:  

接下来就是上一页和下一页的点击事件了,首先是上一页的点击事件

1
2
3
4
5
6
7
8
9
10
//给上一页添加点击事件
$("#prev").click(function(){
    page = page-1;  //当前页减1
    if(page<1)
    {
      page=1;
    }
    Load(); //加载数据
    LoadXinXi(); //加载分页信息
})

再就是下一页的点击事件

1
2
3
4
5
6
7
8
9
10
//给下一页加点击事件
$("#next").click(function(){
    page = page+1;  //当前页加1
    if(page>maxys) 
    {
      page=maxys;
    }
    Load(); //加载数据
    LoadXinXi(); //加载分页信息
})

给循环的数字加点击事件

1
2
3
4
5
6
//给中间的列表加事件
$(".list").click(function(){
    page = parseInt($(this).attr("bs"));
    Load(); //加载数据
    LoadXinXi(); //加载分页信息
})

最后都调用一下就可以了

4.关键字查询,这里就是要对查询进行加点击事件

1
2
3
4
5
("#chaxun").click(function(){
    page = 1;
    Load(); //加载数据
    LoadXinXi(); //加载分页信息
})

最后整体的显示:

这样分页查询解结束了,没有刷新页面就可以分页显示,看下整体的效果

(1)分页显示

(2)查询显示

ajax的分页查询的更多相关文章

  1. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  2. ajax的分页查询(不刷新页面)

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...

  3. Ajax写分页查询(实现不刷新页面)

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  4. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  5. PHP中使用jQuery+Ajax实现分页查询多功能操作

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. 如何用ajax写分页查询(以留言信息为例)-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  7. springMVC+ajax分页查询

    项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...

  8. ajax分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  9. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

随机推荐

  1. Gradle是什么?

    Gradle是什么? Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的 ...

  2. Implementing Recurrent Neural Network from Scratch

    Reading CSV file... Parsed 79171 sentences. Found 65376 unique words tokens. Using vocabulary size 8 ...

  3. 传奇衣服、翅膀、武器、怪物、NPC等外观代码计算方法与公式

    详细介绍humX.wil  weaponX.wil itemsX.wil dnitemsX.wil stateitemX.wil monX.wil代码计算方法   以下计算方法适用于HERO引擎和3K ...

  4. mysql 远程连接不上,bind-address参数配置要求,以及怎么去使得mysql能够允许远程的客户端访问

    刚安装了MySQL服务器,使用远程管理工具总是连接不上,因为知道mysql的默认端口是3306,于是使用telnet连接这个端口,(从这里可以学到telnet是可以这样用的) telnet 192.1 ...

  5. 第八届极客大挑战 Web-故道白云&Clound的错误

    web-故道白云 题目: 解题思路: 0x01 首先看到题目说html里有秘密,就看了下源代码如图, 重点在红圈那里,表示输入的变量是id,当然上一行的method=“get”同时说明是get方式获取 ...

  6. BFS(广度优先搜索遍历保存全局状态,华容道翻版做法)--08--DFS--蓝桥杯青蛙跳杯子

    题目描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  7. 深入剖析Windows专业版安装Docker引擎和Windows家庭版Docker引擎安装的区别

    原创声明:作者:Arnold.zhao  博客园地址:https://www.cnblogs.com/zh94 公司使用的电脑是Windows专业版,所以配置本机的Docker时会方便许多,后续由于需 ...

  8. Xcode创建子工程以及工程依赖

    https://www.jianshu.com/p/f2bc7d155a86 阅读 7858 视频地址 如果文章不详细,点击看操作视频 项目需求:代码抽层,业务逻辑和数据处理要高度抽离,模块化,需要将 ...

  9. matplotlib学习(2)

    1.legend的学习(图例)1.1 代码 import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) #从-1 ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...