jQuery實現的數字分頁程式碼例項

antzone發表於2017-03-15
jQuery

現在很多網站的分頁分頁功能是js集合後臺程式碼實現的，這當然有一定的好處，下面本章節介紹一段利用jQuery實現的數字分頁程式碼，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  width:60px;
  height:20px;
  display:inline-block;
  border:solid 1px black;
  text-align:center;
  margin:5px;
  cursor:pointer;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type='text/javascript'>
var arr=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17);
function pageCon(arr,start,len){
  var constr='';
  for(var i=start;i<start+len;i++){
    if(arr[i-1]){
      constr+=arr[i-1]+"<br/>";
    }
  }
  return constr;
 }
 
function show(arr,now_page){
  var sum=arr.length;
  var page_size=3;
  var page_num=Math.ceil(sum/page_size);
  var start=(now_page-1)*page_size+1;
  var page_str='';
  for(var i=1;i<=page_num;i++){
    var stylei=i;
    if(i==now_page){  
      stylei="<span style='background:black;color:white;margin:0'>"+i+"</span>";
    }
    page_str+='<span>'+stylei+'</span>';
  }
  $('#page').html(page_str);
 
  var constr=pageCon(arr,start,page_size);
  $('#con').html(constr);
}
$(document).ready(function(){
  show(arr,2);
})
</script>
</head>
<body>
<div id='page'></div>
<div id='con'></div>
</body>
</html>

相關文章