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