在具體開發工作中，分頁是一種非常常見功能模組。目前已經有不少基於jquery的分頁外掛，但是他們通常都是一次性獲取所有記錄載入到本地記憶體中，當資料量特別大時，顯然效率較低。為了解決這個問題，實現了基於jquery ajax的非同步分頁。具體過程如下：
1、html

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--用於顯示資料內容-->
<ul id="showData"></ul>
<!--用於顯示分頁按鈕-->
 
 
<div id="pager"></div>
<!--用於顯示當前頁碼等基本資訊-->
<div id="detail"></div>

2、js

<script type="text/javascript">
    $(function  () {
        var pageSize=5;
        var totalPages,curPage,totalRs;
        function showPager(curPage,totalPages,pageSize,totalRs)
        {
 

            //如果只有一頁
            if(totalPages==1)
            {
                $("#pager").html("1");
            }
            //如果是第一頁
            else if(curPage==1)
            {
                $("#pager").html("<a href='#' onclick=getData("+(curPage+1)+")>下一頁</a>  <a href='#' onclick='getData("
 
+totalPages+")'>末頁</a>");
            }
            //如果是最後一頁
            else if(curPage==totalPages)
            {
                $("#pager").html("<a href='#' onclick='getData(1)'>首頁</a>  <a href='#' onclick='getData("+(curPage-1)+")'>上一頁</a>");
            }
            //其他情況
            else
            {
                $("#pager").html("<a href='#' onclick='getData(1)'>首頁</a>  <a href='#' onclick='getData("+(curPage-1)+")'>上一頁</a>"+"<a href='#' onclick='getData("+(curPage+1)+")'>下一頁</a>  <a href='#' onclick='getData("+totalPages+")'>末頁</a>");

            }

        }

        //下面這個函式必須這樣定義，否則會報錯
        getData=function(page)
        {
            curPage=page;
            $("#detail").text("正在獲取。。。")

            $.getJSON("pager.php",{curPage:curPage,pageSize:pageSize},function (rs) {
                var temp="";
                for(each in rs.data)
                {
                    temp+="<li>"+rs.data[each]['title']+"</li>";
                }
                $("#showData").html(temp);
                showPager(curPage,rs.totalPages,pageSize,rs.totalRs);
                $("#detail").text("當前是第"+curPage+"頁，一共有"+rs.totalRs+"條記錄，分為"+rs.totalPages+"頁。")
            })
        }

        //預設先載入第1頁
        getData(1)
    })
</script>

3.php

<?php
    $dbh=new PDO("mysql:host=localhost;dbname=test","root","root");
    $dbh->query("set names utf8");
    $curPage=$_GET['curPage'];
    $pageSize=$_GET['pageSize'];

    $sql1="select title from news limit ".($curPage-1)*$pageSize.", ".$pageSize;
    $sql2="select count(nid) from news";
    $rs1=$dbh->query($sql1)->fetchAll();
    $rs2=$dbh->query($sql2)->fetchAll();

    echo(json_encode(array("data"=>$rs1,"totalPages"=>ceil($rs2[0][0]/$pageSize),"totalRs"=>$rs2[0][0])));
?>

4、結果截圖

預設，第一頁

第二頁

第三頁