简单的分页，模拟数据，没有封装，显示原理，大家有兴趣可以自己封装，这里只是个原理过程，真正的分页也差不多是这个原理，只是请求数据不太一样，html部分：
<!TOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>简单的分页，模拟数据，没有封装，显示原理</title> </head> <body> <div class="box"> <ul> </ul> </div> <p><input class="btn" type="button" value="加载.." /></p> <span style="cursor:pointer;margin-right:10px;" class="prev">上一页</span> <span style="cursor:pointer;margin-right:10px;" class="first">第一页</span> <span style="cursor:pointer;margin-right:10px;" class="last">最后一页</span> <span style="cursor:pointer;margin-right:10px;" class="next">下一页</span> <script type="text/javascript" src="../jquery1.7.1.js"></script> <script type="text/javascript"> ;(function($){ var num = 5;//每页显示的个数 var n = 0; var m = -num; function ajax(pageType){ var oul = $(".box").find("ul"); var ohtml = ""; $.ajax({ type:"get", url:"myjson.json", dataType:"json", success:function(data){ $(oul).empty(); if(n < data.length && pageType=="next"){ //上一页 n += num; m += num; }else if(m > 0 && pageType=="prev"){ //下一页 n -= num; m -= num; }else if(pageType=="first"){ //第一页 n = num; m = 0; }else if(pageType=="last"){ //最后一页 n = data.length+(data.length%num)-1; m = data.length+(data.length%num)-6; } $.each(data,function(i,val){ if(i>=m && i<n){ ohtml += "<li>" + val['news'] + "</li>"; } }); $(".box").find("ul").html(ohtml); } }); }; $(".next").click(function(){ ajax("next"); }); $(".prev").click(function(){ ajax("prev"); }); $(".first").click(function(){ ajax("first"); }); $(".last").click(function(){ ajax("last"); }); $(function(){ //初始化 ajax("next"); }); }(jQuery)); </script> </body> </html>
json部分：
[ {"news":"1求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"2求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"3求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"4求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"5求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"6求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"7求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"8求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"9求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"10求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"11求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"12求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"13求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"14求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"15求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"16求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"17求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}, {"news":"18求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"} ]