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. print

    说一说这个print函数,我们经常使用,但有一些细节却往往错过了 print print()输出会换行是因为默认end="\n" 想要不换行,且覆盖 print("\r第 ...

  2. [SDOI2011]计算器（BSGS）

    洛古题面 对于操作一,用快速幂算即可 代码如下 int quickpow(int a,int b,int k) { int r=1; while(b) { if(b&1) r=(r*a)%k; ...

  3. 最全面的 Spring 学习笔记

    http://www.codeceo.com/article/learn-spring.html 来源:泊浮目 分享到:更多36 Spring致力于提供一种方法管理你的业务对象.在大量Java EE的 ...

  4. java 判断元素是否在数组内

    一,先转为List,再使用contains()方法 String[] strArr = new String[] { "a", "b", "c&quo ...

  5. n+lognlogV查找最大值

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

  6. flask 连接MogoDB数据库

    # -*- encoding: utf-8 -*- from flask import Flask,request,jsonify,render_template #导入pymongo来连接mongo ...

  7. BeautifulSoup获取图片

    参看文档:https://www.cnblogs.com/forever-snow/p/8506746.html

  8. (LIS DP) codeVs 1044 拦截导弹

    题目描述 Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某 ...

  9. lucene创建索引的几种方式(一)

    什么是索引: 根据你输入的值去找,这个值就是索引 第一种创建索引的方式: 根据文件来生成索引,如后缀为.txt等的文件 步骤: 第一步:FSDirectory.open(Paths.get(url)) ...

  10. break #立即终止本次循环

    #!/user/bin/python# -*- coding:utf-8 -*-# print(111)# while True:# print(222)# print(333)# break #立即 ...