1.首先做主页面Ajax_pag.php

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Ajax做分页</title>

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

        <script src="Ajax_pag.js"></script>

        <script src="bootstrap/js/bootstrap.min.js"></script>

        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    </head>

    <style>

        .header{

            margin-top: 20px;

        }

    </style>

    <body>

        <div style="margin-top: 20px; margin-top: 20px;">

            关键字：

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

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

        </div>

        <table class="table table-bordered header">

            <thead>

                <tr>

                    <th>地区代号</th>

                    <th>地区名称</th>

                    <th>父级代号</th>

                </tr>

            </thead>

            <tbody id="list">

            </tbody>

        </table>

        <div style="margin:0 auto; width:500px;">

            <ul class="pagination" id="fenye">

            </ul>

        </div>

        </body>

</html>

2.然后做分页查询JS页面Ajax_pag.js

代码如下：

//ajax分页开始

        var ts = 10;//每页显示的条数

        var page = 1;//当前页

        $(document).ready(function(e) {

            //页面加载数据

            Load();

            //加载分页列表

            Loadlist();

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

        //页面加载数据

        Load();

        //加载分页列表

        Loadlist();

    })

})                

        //加载数据的方法

        function Load(){

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

                $.ajax({

                        async:false,

                        url:"pagechuli.php",

                        data:{page:page,ts:ts,gjz:gjz},//page是显示的页数；ts是显示的条数

                        type:"POST",

                        dataType:"JSON",

                        success: function(data){

                                    var str ="";

                                    for(var k in data)

                                    {

                                    str +="<tr><td>"+data[k][0]+"</td><td>"+data[k][1]+"</td><td>"+data[k][2]+"</td></tr>";

                                    }

                                    $("#list").html(str);//把拼接好的字符串放到要显示的thody里面

                                }

                            })

                        }

        //加载分页列表

        function Loadlist(){

            var str ="";

            //上一页

            str+="<li><a id='prev'>&laquo;</a></li>";

            //加载列表

            for(var i=page-4;i<page+5;i++){

                //限制条件

                if(i>0 && i<=zys()){

                //判断当前页

                if(i==page){

                    str+= "<li class='active'><a>"+i+"</a></li>";

            }else{

            str+= "<li><a class='item'>"+i+"</a></li>";

            }

        }

    }

            //下一页

            str+="<li><a id='next'>&raquo;</a></li>";

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

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

                if(page>1){

                    page--;

                }

                //页面加载数据

                Load();

                //加载分页列表

                Loadlist();

            })

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

                var p = $(this).text();//取到的是字符串,转化为整数

                page = parseInt(p);

                //页面加载数据

                Load();

                //加载分页列表

                Loadlist();

            })

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

                if(page<zys()){

                    page++;

                }

                //页面加载数据

                Load();

                //加载分页列表

                Loadlist();

            })

        }

    //总页数

    function zys(){

        var zys = 0;

        $.ajax({

            async:false,

            url:"zyschuli.php",

            dataType:"TEXT",

            success:function(data){

                zys = Math.ceil(data/ts);

            }

        });

        return zys;

    }

3.最后做分页查询处理页面pagechuli.php

代码如下：

<?php

$gjz = $_POST["gjz"];

$page = $_POST["page"];//获取页数显示值

$ts = $_POST["ts"];//获取每页条数显示值

require_once "./DBDA.class.php";

$db = new DBDA();

$tj = " 1=1 ";

if(!empty($_POST["gjz"])){

    $gjz = $_POST["gjz"];

    $tj = " areaname like '%{$gjz}%' or areacode like '%{$gjz}%' or parentareacode like '%{$gjz}%' ";

}

$tg = ($page-1)*$ts;//每页显示$ts条数据，这里显示的就是当前页的$tg条数据。

$sql = "select * from chinastates where {$tj} limit {$tg},{$ts}";

echo $db->JsonQuery($sql,0)

小插件：总页数的处理页面zyschuli.php

<?php

require_once "./DBDA.class.php";

$db = new DBDA();

$sql = "select count(*) from chinastates";

echo $db->StrQuery($sql,0);

效果如图：

关键字查询：

PHP中使用jQuery+Ajax实现分页查询多功能操作的更多相关文章

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

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

  2. Java进阶知识01 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能

    1.效果图示 横线上方的部分不动(没有刷新),下方实现刷新(异步刷新) 2.实现步骤 jquery+ajax+struts技术实现异步刷新功能的步骤:    1.需要用到 jquery+ajax+st ...

  3. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

  4. ajax的分页查询（不刷新页面）

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

  5. Ajax写分页查询（实现不刷新页面）

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

  6. ajax的分页查询

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

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

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

  8. 如何用ajax写分页查询（以留言信息为例）-----2017-05-17

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

  9. 利用Linq + Jquery + Ajax 异步分页的实现

    在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...

随机推荐

  1. C语言学习记录之一

    1. while语句 2. 循环嵌套 3. 数组 4. 排序 1. while 由于上节课时间有限,介绍完for循环后没有来得及讲while语句.简单来讲,while也是一种循环结构,先看一个例子: ...

  2. poj-3279 poj-1753（二进制枚举）

    题目链接:http://poj.org/problem?id=3279 题目大意: 有一个m*n的棋盘(1 ≤ M ≤ 15; 1 ≤ N ≤ 15),每个格子有两面分别是0或1,每次可以对一个格子做 ...

  3. Docker安装及常用命令

    修改机器名: [root@docker /]# hostnamectl set-hostname Docker 安装EPEL源: [root@docker /]# yum -y install epe ...

  4. SRM 605 div 2 T3

    #include <bits/stdc++.h> #define Mo 1000000007 #define MAXN 50 #define MAXK 10 using namespace ...

  5. 【洛谷P2709】小B的询问

    题目大意:给定一个长度为 N 的序列,M 个询问,静态查询区间 [l,r] 内的不同颜色数的平方和. 题解:直接莫队即可. 代码如下 #include <bits/stdc++.h> #d ...

  6. [luogu2292][L语言]

    题目链接 思路 这道题我用的是AC自动机的做法. 先把子串挂到trie树上,在单词结尾打标记的时候,标记的是当前单词的长度.然后去上面查询母串的时候,每查询到一个单词,就建立一条线段,这条线段的结尾位 ...

  7. 删除文件夹下面的文件的shell命令

    首先看我的文件所在目录 我想删除位于desktop下面的helloBox中的react-hello-dimple中的package.json文件,我们注意一下时间是4月18号 shell命令如下 $ ...

  8. 斯坦福大学公开课机器学习：advice for applying machine learning - deciding what to try next（设计机器学习系统时，怎样确定最适合、最正确的方法）

    假如我们在开发一个机器学习系统,想试着改进一个机器学习系统的性能,我们应该如何决定接下来应该选择哪条道路? 为了解释这一问题,以预测房价的学习例子.假如我们已经得到学习参数以后,要将我们的假设函数放到 ...

  9. struts2 UI标签 和 主题

    四.Struts2的UI标签和主题 1.Struts2中UI标签的优势 自动的数据回显和错误提示功能 自带的简单样式和排版 2.表单标签的通用属性 说明:UI标签中value的取值一般都是字符串. 2 ...

  10. django-rest-framework-jwt

    官网文档:http://getblimp.github.io/django-rest-framework-jwt/ GitHub:https://github.com/GetBlimp/django- ...