首页 > > 网络编程 > Php编程 >

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

2018-06-22 05:12:01来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

 

要求：

 

 

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

若不使用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>
View Code

 

查询总页数的页面：

 

<?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向上取整
View Code

 

加载分页信息的页面：

 

<?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;
View Code

 

 

 

欧克！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Laravel --- 【转】安装调试利器 Laravel Debugbar

下一篇：PHP语言开发微信公众平台（订阅号）之注册（1）

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签