這個是很簡單的一種分頁，只能對列表進行分頁。為了開發有可能需要用到記錄下來
Html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>li文章分頁</title> <script src="../../../project/HTML/Temporary/JS/jquery-3.2.1/jquery-3.2.1.min.js"></script> <script src="../../../project/HTML/Temporary/JS/pagenation.js"></script> </head> <body> <ul id="all"> <li>第1集</li> <li>第2集</li> <li>第3集</li> <li>第4集</li> <li>第5集</li> <li>第6集</li> <li>第7集</li> <li>第8集</li> <li>第9集</li> <li>第10集</li> </ul> <div class="page"> <div id="page"> </div> </div> <script> var zz=getzz() var pageno=1 ; //當前頁 var pagesize=5; //每頁多少條信息 if(zz.length%pagesize==0){ var pageall =zz.length/pagesize ; }else{ var pageall =parseInt(zz.length/pagesize)+1; } //一共多少頁 change(1); </script> </body> </html>
引入的pagenation文件里面其實就是兩個函數：
function getzz() { var a = $("ul#all li"); var zz =new Array(a.length); for(var i=0;i <a.length;i++){ zz[i]=a[i].innerHTML; } //div的字符串數組付給zz return zz; } function change(e){ debugger pageno=e; if(e<1){ e=1;pageno=1;//就等於第1頁 ， 當前頁為1 } if(e>pageall){ //如果輸入頁大於最大頁 e=pageall;pageno=pageall; //輸入頁和當前頁都=最大頁 } $("#all").html("");//全部清空 var html=""; for(var i=0;i<pagesize;i++){ html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//創建一頁的li列表 if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范圍跳出 } $("ul#all").html(html);//給ul列表寫入html var ye=""; for(var j=1;j<=pageall;j++){ if(e==j){ ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> " }else{ ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> " } } var pageContent=""; pageContent +='第<span id=\"a2\">'+pageno+'</span>/'; pageContent +='<span id="a1">'+pageall+'</span>頁'; pageContent +='<span id="a3">'+ye+'</span>'; pageContent +='<a href="#" onClick="change(--pageno)">上一頁</a>'; pageContent +='<a href="#" onClick="change(++pageno)">下一頁</a>'; $("#page").html(pageContent); }