要求：

获取数据库中大量的信息显示在页面上，必然要使用到分页查询；

若不使用Ajax，而是用其他的方法，肯定是要刷新页面的，用户体检很不好，

所以最好使用Ajax的方法写分页查询；

1.先来找一张数据很多的表吧！

一张简单的表

代码，引入jquery包：

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

写一张表格，显示我们的代号跟名称：

<table class="table table-striped">

    <thead>

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

    </thead>

    <tbody id="td">

    </tbody>

</table>

这些都很简单，没毛病！

2.设一个当前页，定义一个变量为1（第一页）：

 var page = 1;

    //当前页，默认等于1

3.下面来写第一个方法：需要用ajax，这个方法主要起查询，且分页的作用：

 function load()

    {

        $.ajax({

            url: "jiazai.php",

//        显示所有的数据不用写data

            data:{page:page},
//当前页记得传过去

            type:"POST",

            dataType: "TEXT",

            success: function (data) {

            }

 });

    }

4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据，用到limit：

<?php

include ("db.class.php");

$db = new db();

$page=$_POST["page"];

//去当前页page

$num = 3;

//每页显示几条

$tg = ($page-1)*3;//跳过几条

$sql = "select * from min limit {$tg},{$num}";

//limit:两个参数，第一个是跳过多少条，第二个是取多少条

echo $db->Query($sql);

做完了第一步，来看看图：

显示数据实现！

好的，每页先是三条数据已经实现了，（页面变成这样我用了美化网页的Bootstrap，前面有讲到）

5.显示分页信息，写一个方法，先用ajax先获取总页数：

  function loadfenye()

    {

        var s = "";

        //用于接收

        var xiao = 1;

//        最大页

        var da = 1;

//        最小页

        $.ajax({

    async:false,

//            做成同步

    url:"zys.php",

    dataType:"TEXT",

    success:function(data){

        da = data;

        //最大页数

            }

});

    }

接下来做查询总页数的php页面：

<?php

//查询总页数

include ("db.class.php");

$db = new db();

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

$zts = $db->strquery($sql);

//总条数

echo ceil($zts/3);

//ceil向上取整

好啦，总页数获取到了，回来把分页写完吧：

   //加载分页信息方法

    function loadfenye()

    {

        var s = "";

        //用于接收

        var xiao = 1;

//        最大页

        var da = 1;

//        最小页

        $.ajax({

    async:false,

//            做成同步

    url:"zys.php",

    dataType:"TEXT",

    success:function(data){

        da = data;

        //最大页数，查到的最大页数交个默认的最大页数

            }

});

//加载上一页

        s += "<li><a>&laquo;</a></li>";

//        加载分页列表

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

{

    //i代表列表的页数

    if(i>=xiao && i<=da)

    {

        s += " <li><a>"+i+"</a></li>"

    }

}

        //        加载下一页

        s += "<li><a>&raquo;</a></li>";

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

    }

这样写完了以后，来看图：

分页的信息也显示出来了

6.来把默认选中页数的背景色来改变一下吧

看一下Bootstrap；改背景色的方法吧：

很显然是多了一个active的样式，我们用判断给加上吧

 if(i>=xiao && i<=da) {

        if (i == page) {

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

        }

        else {

            s += " <li><a>" + i + "</a></li>";

        }

好了，看一下：

可以，没毛病

7.做页数的点击事件，实现点击页数跳转到该页数并显示数据，还要更新列表；

先给数字列表加上一个class

 s += " <li class='active list'><a>" + i + "</a></li>"

然后写方法：

//给列表加上点击事件

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

            //改变当前页数

            //把点击的页数，扔给page（当前页）

            page = $(this).text();

//            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

    }

当我点击第五页：

没毛病；

8.再来就是上一页和下一页的点击事件了，首先是上一页的点击事件：

首先在上一页的列表里加上class，便于写事件：

  s += "<li class='sy'><a>&laquo;</a></li>";

来，上一页点击事件：

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

            //改变当前页

            if(page>1)

            {

                //如果不是第一页

                page = parseInt(page) - 1;

            }

            //            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

下一页的点击事件：

同上：列表里加上class，便于写事件：

  s += "<li class='xy'><a>&raquo;</a></li>";

下一页点击事件：

 //下一页点击事件

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

//            alert(da);

            if(page<da)

            {

                //如果不是第一页

                page = parseInt(page) + 1;

            }

            //            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

好，完美实现ajax分页查询；

8.再加一个按条件查询：

加上文本框：

<div>

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

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

</div>

来写点击事件：

  //给查询加点击事件

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

        //重新加载

        //调用load方法

        load();

        //把加载数据封装成一个方法

        loadfenye();

        //加载分页信息方法

    })

接下来我们需要改一下这两个方法：

ajax只需要把文本框的name传过去就好啦：

   data:{page:page,name:name},

            type:"POST",
 data:{name:name},

    type:"POST",

在处理页面，设置一个恒等的条件：

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

    $name = $_POST["name"];

    $tj = " name like '%{$name}%' ";

}

最后在sql语句后面调用就好啦

图：

页面不刷新的分页查询就欧克了；

源码：

显示页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

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

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

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

<style type="text/css">

    .xq{

        margin-left: 5px;

    }

    #fenye li:hover{

        cursor:pointer ;

    }

</style>

</head>

<body>

<h1>显示数据</h1>

<div>

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

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

</div>

<br/>

<table class="table table-striped">

    <thead>

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

    </thead>

    <tbody id="td">

    </tbody>

</table>

<br/>

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

<!--        <li><a href="#">&laquo;</a></li>-->

<!--        <li><a href="#">&raquo;</a></li>-->

    </ul></div>

<!--模态框-->

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">详情</h4>

            </div>

            <div class="modal-body" id="nr">

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

</html>

<script>

    var page = 1;

    //当前页，默认等于1

    //调用load方法

    load();

    //把加载数据封装成一个方法

    loadfenye();

    //加载分页信息方法

    //给查询加点击事件

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

        //重新加载

        //调用load方法

        load();

        //把加载数据封装成一个方法

        loadfenye();

        //加载分页信息方法

    })

    function loadfenye()

    {

        var s = "";

        //用于接收

        var name = $("#name").val();

        var xiao = 1;

//        最大页

        var da = 1;

//        最小页

        $.ajax({

    async:false,

//            做成同步

    url:"zys.php",

    data:{name:name},

    type:"POST",

    dataType:"TEXT",

    success:function(data){

        da = data;

        //最大页数

            }

});

//加载上一页

        s += "<li class='sy'><a>&laquo;</a></li>";

//        加载分页列表

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

{

    //i代表列表的页数

    if(i>=xiao && i<=da) {

        if (i == page) {

            s += " <li class='active list'><a>" + i + "</a></li>"

        }

        else {

            s += " <li class='list'><a>" + i + "</a></li>";

        }

    }

}

        //        加载下一页

        s += "<li class='xy'><a>&raquo;</a></li>";

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

//给列表加上点击事件

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

            //改变当前页数

            //把点击的页数，扔给page（当前页）

            page = $(this).text();

//            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

        //上一页点击事件

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

            //改变当前页

            if(page>1)

            {

                //如果不是第一页

                page = parseInt(page) - 1;

            }

            //            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

        //下一页点击事件

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

//            alert(da);

            if(page<da)

            {

                //如果不是第一页

                page = parseInt(page) + 1;

            }

            //            page获取了当前页，重新加载以下方法

            //调用load方法

            load();

            //把加载数据封装成一个方法

            loadfenye();

            //加载分页信息方法

        })

    }

    function load()

    {

        var name = $("#name").val();

        $.ajax({

            url: "jiazai.php",

//        显示所有的数据不用写data

            data:{page:page,name:name},

            type:"POST",

            dataType: "TEXT",

            success: function (data) {

                var str = "";

                var hang = data.split("|");

                //split拆分字符串

                for (var i = 0; i < hang.length; i++) {

                    //通过循环取到每一行;拆分出列；

                    var lie = hang[i].split("-");

                    str = str +

                        "<tr><td>"

                        + lie[0] +

                        "</td><td>"

                        + lie[1] +

                        "</td><td>" +

                        "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>点击删除</button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>查看详情</button>" +

                        //ids里面存上主键值

                        "</td></tr>";

                }

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

                //找到td把html代码扔进去

                addshanchu();

                addxiangqing();

            }

        });

    }

    //给查看详情加事件

    function addxiangqing()

    {

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

            $('#myModal').modal('show')

            //打开模态框

            var ids = $(this).attr("ids");

            $.ajax({

               url:"xiangqing.php",

                data:{ids:ids},

               dataType:"TEXT",

               type:"POST",

                   success:function(data){

                   //拆分

                       var lie = data.split("^");

//                       var str = "<div>代号:"+lie[0]+"</div><div>名称:"+lie[1]"</div>";

                       //造字符串

                       var str = "<div>代号："+lie[0]+"</div><div>名称："+lie[1]+"</div>";

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

            }

            });

            //在模态框里面要显示的内容

        })

    }

    //把删除事件封装成方法：

    function addshanchu()

    {

        //给删除按钮加上事件

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

            var ids = $(this).attr("ids");

            $.ajax({

                url: "shanchu.php",

                data: {ids: ids},

                dataType: "TEXT",

                type: "POST",

                success: function (d) {

                    if (d.trim() == "ok") {

                        alert("删除成功");

                        //调用加载数据的方法

                        load();

                    }

                    else {

                        alert("删除失败");

                    }

                }

            });

        })

    }

</script>

查询总页数的页面：

<?php

//查询总页数

include ("db.class.php");

$db = new db();

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

    $name = $_POST["name"];

    $tj = " name like '%{$name}%' ";

}

$sql = "select count(*) from min WHERE {$tj} ";

$zts = $db->strquery($sql);

//总条数

echo ceil($zts/3);

//ceil向上取整

加载分页信息的页面：

<?php

include ("db.class.php");

$db = new db();

$page=$_POST["page"];

//去当前页page

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

    $name = $_POST["name"];

    $tj = " name like '%{$name}%' ";

}

$num = 3;

//每页显示几条

$tg = ($page-1)*3;//跳过几条

$sql = "select * from min where {$tj}  limit {$tg},{$num}";

//limit:两个参数，第一个是跳过多少条，第二个是取多少条

$arr = $db->Query($sql);

//遍历

$str="";

foreach ($arr as $v)

{

    $str = $str.implode("-",$v)."|";

    //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|

}

$str = substr($str,0,strlen($str)-1);

//截取字符串：从第0个开始，截取它的长度-1

//strlen获取字符串长度

echo $str;

欧克！

Ajax写分页查询（实现不刷新页面）的更多相关文章

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

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

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

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

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

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

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

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

  5. ajax的分页查询

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

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

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

  7. 使用Ajax上传图片到服务器（不刷新页面）

    有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...

  8. Ajax异步调用http接口后刷新页面

    使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...

  9. Ajax如何实现从前端不刷新页面就可以到后端取到数据

    提到axaj很多人总说很难,什么回调函数呀等等就让人心烦,其实懂得ajax在js里面是如何实现向服务器请求数据的原理,那么理解ajax也就不是很难了,现在我们一起来看看. ajax作用:ajax技术的 ...

随机推荐

  1. Grunt + Bower—前端构建利器

    目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...

  2. 微信LazyMan笔试题的深入解析和实现

    一.题目介绍  以下是我copy自网上的面试题原文: 实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")输出: Hi! This is Hank!   ...

  3. 【求Java工程师/专家】大型互联网公司急招

    互联网行业排名Top公司,目前项目扩张阶段,需求数量较多的JAVA中高端后台开发人员,需要有分布式系统开发经验,年后有找工作的同学可以联系我了. 工作地点:杭州 岗位要求: 1.精通Java SE和J ...

  4. windows 下odoo 不同版本安装运行问题

    在开发测试不同版本odoo时,总会遇到在同一浏览器下运行出错的状况.虽然可以把不同版本分属不同的端口,但是登录标识会入写用户本地浏览器cookie,由于cookie只匹配域名及路径但是不区分端口, 所 ...

  5. 蓝桥网试题 java 基础练习 矩形面积交

    ------------------------------------------------------------------------------------------- 思路见锦囊2 - ...

  6. java实现简单的单点登录_转

    摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现手段,并且给出Web-SSO ...

  7. redisson实现分布式锁原理

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. C++学习的心路历程之心理障碍

    断断续续的C++学习已经过了1年多了,可是,我还是没有迈出可以自如输出写点什么的那一步.甚至我因为这个老是怀疑自己的智商,我是真心想学懂,因为这个关系到我的就业,直接关系到我的饭碗.我是十分的着急,可 ...

  9. 真机测试错误“The application could not be verified”

    真机测试错误"The application could not be verified" 真机测试的时候报错:"The application could not be ...

  10. CentOS7 设置局域网固定IP

    题记: 在局域网内PC通常都是采用自动获取IP的方式从路由器拿到局域网IP的,每次PC启动后分配到的局域网IP都不一定相同.但是出于某些特殊的需求,例如要在局域网内做端口映射,需要将PC设置成使用固定 ...