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

Posted 2020-10-07 WORSHIP亚萨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PHP中使用jQuery+Ajax实现分页查询多功能操作相关的知识，希望对你有一定的参考价值。

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实现分页查询多功能操作的主要内容，如果未能解决你的问题，请参考以下文章

（进阶篇）jQuery+Ajax+PHP+Mysql实现分页显示数据

使用 ajax php mysql 实现分页搜索

使用 Jquery、PHP、Mysql 进行 Ajax 分页 [关闭]

php 使用JQuery的Laravel AJAX分页

请高人讲解java ajax实现分页的思路

使用 codeigniter 和 jquery 进行 AJAX 分页