Ajax做分页

Posted Strive-count

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax做分页相关的知识，希望对你有一定的参考价值。

用这种ajax做分页的方法比较简单，把代码直接复制就可以，然后根据实际更改一下里面的参数。

1.设置分页显示显示的样式，显示效果如下。

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:"微软雅黑"}
.b3{ list-style:none; width:400px; height:30px; font-size:16px; text-align:center; line-height:30px; vertical-align:middle; position:relative}
.b4{ width:50px; height:30px; float:left; font-size:20px; text-align:center; line-height:30px; vertical-align:middle}
.b4:hover{ cursor:pointer; background-color:#FC6}
#fy_shang{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px; float:left}
#fy_xia{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px}
#fy_shang:hover{ cursor:pointer; background-color:#FC6}
#fy_xia:hover{ cursor:pointer; background-color:#FC6}
</style>

 

2.页数显示代码容器，把这段代码放在</table>后面。

<!--分页开始-->
<center>
<ul class="pagination b3" id="fy_list">       
</ul>
<input type="hidden" value="1" id="fy_n" />
</center>
<!--分页结束-->

 

3.ajax实现分页的代码

//ajax分页开始
$(document).ready(function(e) {
    JiaZai();
    var zys = 0;
//页面加载数据
})
function JiaZai()
    {        
        var n = $("#fy_n").val();//页数显示框里面显示的页数
        $.ajax({
                url:"shipinguanlichuli.php",
                data:{n:n,gjz:""},//n是显示的页数。gjz是表格显示中有关键字查询，这里gjz传一个空值，意思是没有查询条件，查询所有的。
                type:"POST",
                dataType:"JSON",
                success: function(data){                                    
                        var s ="";                        
                            for(var i in data)
                            {
                            s+="<tr><td><input type=\'checkbox\' class=\'qx\'  value=\'"+data[i].id+"\' name=\'sc[]\' /></td><td class=\'hidden-xs\'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class=\'hidden-xs\'>"+data[i].details+"</td><td class=\'hidden-xs\'>"+data[i].wprice+"</td><td class=\'hidden-xs\'>"+data[i].dprice+"</td><td class=\'hidden-xs\'>"+data[i].class+"</td><td><a href=\'xiugai.php?c="+data[i].id+"\'>修改</a></td><td><a href=\'shanchuchuli.php?c="+data[i].id+"\' onclick=\\"return confirm(\'确定删除吗？\')\\">删除</a></td></tr>";//拼接表格显示内容
                            }
                        $("#a22").html(s);//把拼接好的字符串放到要显示的div里面。                                                    
                    }
            });
            
        //获取分页数(列表)
        $.ajax({
                url:"zyschuli3.php",
                type:"POST",
                dataType:"TEXT",
                success: function(data){                    
                        //总页数
                        var ys = Math.ceil(data/15); 
                        zys = ys;                        
                        var s = "<div><a id=\'fy_shang\' class=\'b4\'>上一页</a></div>";
                        var dangqian = $("#fy_n").val(); //当前页数                        
                        for(var i=dangqian-2;i<=dangqian+2;i++)
                        {
                            if(i>0 && i<=ys)
                            {
                                if(dangqian==i)
                                {
                                    s+="<div class=\'b4\' class=\'active\'><a class=\'fy_zhong b4\'>"+i+"</a></div>";
                                }
                                else
                                {
                                    s+="<div class=\'b4\'><a class=\'fy_zhong\'>"+i+"</a></div>"
                                }
                            }
                        }
                        s += "<div><a id=\'fy_xia\' class=\'b4\'>下一页</a></div>";
                        $("#fy_list").html(s);
                        
                           //给分页列表加事件
                        JiaShiJian();
                    }
                })
　　//给分页列表加事件的方法
　　function JiaShiJian()
　　{
　　　　$("#fy_shang").click(function(){    
　　　　var n = $("#fy_n").val(); 
　　　　if(n>1)
　　　　{
　　　　　　n--;
　　　　}
　　　　else
　　　　{
　　　　　　n=1;
　　　　}
　　　　　　$("#fy_n").val(n);

　　　　//加载数据
　　　　JiaZai();
　　　　})
　　　　$("#fy_xia").click(function(){
　　　　var n = $("#fy_n").val(); 
　　　　if(n<zys)
　　　　{
　　　　　　n++;
　　　　}
　　　　else
　　　　{
　　　　　　n=zys;
　　　　}
　　　　$("#fy_n").val(n);

　　　　//加载数据
　　　　JiaZai();
　　　　})
　　　　　　$(".fy_zhong").click(function(){
　　　　　　var n = $(this).text();
　　　　　　$("#fy_n").val(n);

　　　　//加载数据
　　　　JiaZai();
　　　　})
　　}

 

4.如果要加上关键字查询功能，现在表格上面加上关键字输入框。

关键字：<input id="guanjianzi" type="text" name="key" />

然后在js代码中多写一步，其实就是重复显示效果的js代码，里面加上条件。下面是分页显示+关键字查询所有的代码。

//ajax分页开始
$(document).ready(function(e) {
    JiaZai();
    var zys = 0;
//页面加载数据
})
function JiaZai()
    {        
        var n = $("#fy_n").val();//页数显示框里面显示的页数
        $.ajax({
                url:"shipinguanlichuli.php",
                data:{n:n,gjz:""},//n是显示的页数。gjz是表格显示中有关键字查询，这里gjz传一个空值，意思是没有查询条件，查询所有的。
                type:"POST",
                dataType:"JSON",
                success: function(data){                                    
                        var s ="";                        
                            for(var i in data)
                            {
                            s+="<tr><td><input type=\'checkbox\' class=\'qx\'  value=\'"+data[i].id+"\' name=\'sc[]\' /></td><td class=\'hidden-xs\'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class=\'hidden-xs\'>"+data[i].details+"</td><td class=\'hidden-xs\'>"+data[i].wprice+"</td><td class=\'hidden-xs\'>"+data[i].dprice+"</td><td class=\'hidden-xs\'>"+data[i].class+"</td><td><a href=\'xiugai.php?c="+data[i].id+"\'>修改</a></td><td><a href=\'shanchuchuli.php?c="+data[i].id+"\' onclick=\\"return confirm(\'确定删除吗？\')\\">删除</a></td></tr>";//拼接表格显示内容
                            }
                        $("#a22").html(s);//把拼接好的字符串放到要显示的div里面。                                                    
                    }
            });
            
        //获取分页数(列表)
        $.ajax({
                url:"zyschuli3.php",
                type:"POST",
                dataType:"TEXT",
                success: function(data){                    
                        //总页数
                        var ys = Math.ceil(data/15); 
                        zys = ys;                        
                        var s = "<div><a id=\'fy_shang\' class=\'b4\'>上一页</a></div>";
                        var dangqian = $("#fy_n").val(); //当前页数                        
                        for(var i=dangqian-2;i<=dangqian+2;i++)
                        {
                            if(i>0 && i<=ys)
                            {
                                if(dangqian==i)
                                {
                                    s+="<div class=\'b4\' class=\'active\'><a class=\'fy_zhong b4\'>"+i+"</a></div>";
                                }
                                else
                                {
                                    s+="<div class=\'b4\'><a class=\'fy_zhong\'>"+i+"</a></div>"
                                }
                            }
                        }
                        s += "<div><a id=\'fy_xia\' class=\'b4\'>下一页</a></div>";
                        $("#fy_list").html(s);
                        
                           //给分页列表加事件
                        JiaShiJian();
                    }
                })                
                
            $("#guanjianzi").keyup(function(){
                var gjz = $(this).val();
                var n = $("#fy_n").val();
                $.ajax({
                    url:"shipinguanlichuli.php",
                    data:{n:n,gjz:gjz},
                    type:"POST",
                    dataType:"JSON",
                    success: function(data){                        
                        var s ="";                        
                            for(var i in data)
                            {
                            s+="<tr><td><input type=\'checkbox\' class=\'qx\'  value=\'"+data[i].id+"\' name=\'sc[]\' /></td><td class=\'hidden-xs\'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class=\'hidden-xs\'>"+data[i].details+"</td><td class=\'hidden-xs\'>"+data[i].wprice+"</td><td class=\'hidden-xs\'>"+data[i].dprice+"</td><td class=\'hidden-xs\'>"+data[i].class+"</td><td><a href=\'xiugai.php?c="+data[i].id+"\'>修改</a></td><td><a href=\'shanchuchuli.php?c="+data[i].id+"\' onclick=\\"return confirm(\'确定删除吗？\')\\">删除</a></td></tr>";
                            }
                        $("#a22").html(s);                                                                    
                    }
            });
        //获取分页数(列表)
        //var guanjianzi = $("#guanjianzi").val();
        $.ajax({
                url:"zyschuli3.php",
                data:{gjz:gjz},
                type:"POST",
                dataType:"TEXT",
                success: function(data){                    
                        //总页数
                        var ys = Math.ceil(data/15); 
                        zys = ys;                        
                        var s = "<li><a id=\'fy_shang\' class=\'b4\'>上一页</a></li>";
                        var dangqian = $("#fy_n").val(); //当前页数
                        
                        for(var i=dangqian-2;i<=dangqian+2;i++)
                        {
                            if(i>0 && i<=ys)
                            {
                            if(dangqian==i)
                            {
                            s+="<li class=\'active\'><a class=\'fy_zhong b4\'>"+i+"</a></li>";
                            }
                            else
                            {
                                s+="<li><a class=\'fy_zhong b4\'>"+i+"</a></li>"
                            }
                            }
                        }
                        s += "<li><a id=\'fy_xia\' class=\'b4\'>下一页</a></li>";
                        $("#fy_list").html(s);
                        
                           //给分页列表加事件
                        JiaShiJian();
                    }
                })
            });
    }
    
    //给分页列表加事件的方法
    function JiaShiJian()
    {
        $("#fy_shang").click(function(){            
                var n = $("#fy_n").val(); 
                if(n>1)
                {
                    n--;
                }
                else
                {
                    n=1;
                }
                $("#fy_n").val(n);
                
                //加载数据
                JiaZai();
            })
        $("#fy_xia").click(function(){
                var n = $("#fy_n").val(); 
                if(n<zys)
                {
                    n++;
                }
                else
                {
                    n=zys;
                }
                $("#fy_n").val(n);
                
                //加载数据
                JiaZai();
            })
        $(".fy_zhong").click(function(){
                var n = $(this).text();
                $("#fy_n").val(n);
                
                //加载数据
                JiaZai();
            })
    }
</script>

 

5.处理页面1  shipinguanlichuli.php

<?php
include("./DBDA.class.php");
$db = new DBDA();
$n = $_POST["n"];//获取页数显示框里面的值
$tg = ($n-1)*15;//每页显示15条数据，这里显示的就是当前页的15条数据。
$tj1 = " 1=1 ";//默认条件是个恒成立的，如果没有其他条件就是查询所有的。
if(!empty($_POST["gjz"]))//获取提交的关键字
{
    $gjz = $_POST["gjz"];
    $tj1 = " name like \'%{$gjz}%\' or details like \'%{$gjz}%\' or dprice like \'%{$gjz}%\' or dprice like \'%{$gjz}%\' ";//拼接查询条件
}
$sqlsj = "select * from product where {$tj1} limit {$tg},15 ";    
echo json_encode($db->GuanQuery($sqlsj));

 

6.处理页面2 zyschuli3.php

<?php
include("DBDA.class.php");
$db = new DBDA();
$tj1 = " 1=1 ";//默认条件是个恒成立的，如果没有其他条件就是查询所有的。
if(!empty($_POST["gjz"]))//获取提交的关键字
{
    $gjz = $_POST["gjz"];
    $tj1 = " name like \'%{$gjz}%\' or details like \'%{$gjz}%\' or dprice like \'%{$gjz}%\' or dprice like \'%{$gjz}%\' ";//拼接查询条件
}
$sql ="select count(*) from product where {$tj1}";//查询符合条件的数据的总条数
$sj = $db->StrQuery($sql);
echo $sj;

 

以上是关于Ajax做分页的主要内容，如果未能解决你的问题，请参考以下文章

Ajax做分页

ajax做分页

项目一众筹网04_0_角色维护-分页（全部用Ajax来做_ajax默认为异步，但是也可以设置为同步_异步做分页_js会比较多我们的js写到外部测试接口通不通

java ajax分页问题

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

quartz怎么做分页查询