PHP Ajax 异步分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/laoyaotask/article/details/76796779

在具体开发工作中，分页是一种非常常见功能模块。目前已经有不少基于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、结果截图

默认，第一页

第二页

第三页