码迷,mamicode.com
首页 > 其他好文 > 详细

JQ分页功能

时间:2015-05-29 11:19:13      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

HTML

<div id=‘page‘></div>
<div id=‘con‘></div>

CSS

span{width: 60px;height: 20px;display: inline-block;border: solid 1px black;text-align: center;margin: 5px;cursor:pointer;}

JQ

<script type=‘text/javascript‘>
	var arr=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
	 /*
	 显示那一页的内容
	 arr内容数组,那页的从哪条开始显示的,len就是每页显示内容条数
	 */
	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=5;
	  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 onclick="show(arr,‘+i+‘)">‘+stylei+‘</span>‘;
	    }
	  $(‘#page‘).html(page_str);
	  var constr=pageCon(arr,start,page_size);
	  $(‘#con‘).html(constr);
	}
	show(arr,2);
</script>

记得引jq文件~~  囧

END !

 

  

 

JQ分页功能

标签:

原文地址:http://www.cnblogs.com/htzan/p/4537772.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!