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;