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

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

2018-06-22 05:28:16来源：未知阅读 ()

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);

效果如图：

关键字查询：

标签：

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

上一篇：微信小程序中发送模版消息注意事项

下一篇：PHP调试跟踪之XDebug使用总结

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

热门词条

最新资讯

热门关注

热门标签