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

2022-11-29 09:55:21

要求：

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

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

欧克！

码农公寓

相关文章