簡單的分頁，模擬數據，沒有封裝，顯示原理，大家有興趣可以自己封裝，這里只是個原理過程，真正的分頁也差不多是這個原理，只是請求數據不太一樣，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求會產生若干不同的事件,我們可以訂閱這些事件並在其中處理我們"} ]