首頁 > 教學 > PHP 教學

PHP如何?ajax分頁總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
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();            })                        $(".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);

效果

關鍵字查詢效果如：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More