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. Kafka史上最详细原理总结

    https://blog.csdn.net/ychenfeng/article/details/74980531 Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(pa ...

  2. Spring Boot 1.X和2.X优雅重启实战

    纯洁的微笑 今天 项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等待未完成的请求执行完成 ...

  3. WebService学习总结(一)——WebService的相关概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  4. BZOJ3512 DZY Loves Math IV

    解:这又是什么神仙毒瘤题...... 我直接把后面那个phi用phi * I = id反演一波,得到个式子,然后推不动了...... 实际上第一步我就大错特错了.考虑到n很小,我们有 然后计算S,我们 ...

  5. n+lognlogV查找最大值

    来自Blogewoosh #6. 啃了一下,写个翻译吧. 问题:你有一个数组,你不知道每个元素的大小,但是能够提出询问:a[x]是否>=v?你需要找出这个数组的最大值,只能询问n + lognl ...

  6. Command `bundle` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

    呃呃,在写下面的代码时出现的问题,解决办法是npm install或者yarn,如果yarn报错,再npm install就可以了 下面的是携程App首页的样式,有轮播,我没有实现出来 代码如下: / ...

  7. Vue学习（4）

    昨天内容回顾 1.{{}}模板语法.插值.简单运算2.指令系统 v-if 真正销毁重建 v-show 更改css的display,用于重复切换出现 v-bind 绑定属性 : v-on 绑定事件 @ ...

  8. FluentScheduler定时器计划任务

    http://www.cnblogs.com/lgxlsm/p/6734011.html 用了FluentScheduler后,再也比想用timer计时器了. FluentScheduler 是 .N ...

  9. HTML学习笔记Day9

    一.宽高自适应 网页布局中经常要定义元素的宽和高:但很多时候我们希望元素的大小能够根据窗口或父元素自动调整,这就是自适应,元素自适应在网页布局中非常重要,tanenggou它能够使网页显示更灵活,可以 ...

  10. HTTP协议相关原理

    HTTP 的全称是 Hyper Text Transfer Protocol,中文名叫做超文本传输协议 HTTP协议是用于从网络传输超文本数据到本地浏览器的传送协议,它能保证传送高效而准确地传送超文本 ...