• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

PHP如何实现ajax分页总结

php 搞代码 3年前 (2022-01-22) 30次浏览 已收录 0个评论

PHP如何实现ajax分页,本文中小编介绍一下ajax结合jquery利用PHP实现的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();            })                      <div style="color:transparent">本&文来源gaodai^.ma#com搞#代!码网</div><strong>搞gaodaima代码</strong>  $(".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

<?phprequire_once "./DBDA.class.php";$db = new DBDA();$sql = "select count(*) from chinastates";echo $db->StrQuery($sql,0);

效果如图:

关键字查询效果如下图:

以上就是PHP如何实现ajax分页总结的详细内容,更多请关注搞代码gaodaima其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:PHP如何实现ajax分页总结

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址