js分頁代碼分享
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='jQuery.js'></script>
<style type="text/css">
span{width: 60px;height: 20px;display: inline-block;border: solid 1px black;text-align: center;margin: 5px;cursor:pointer;}
</style>
</head>
<body>
<div id='page'></div>
<div id='con'></div>
<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);
/*
顯示那一頁的內(nèi)容
arr內(nèi)容數(shù)組,那頁的從哪條開始顯示的,len就是每頁顯示內(nèi)容條數(shù)
*/
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 onclick="show(arr,'+i+')">'+stylei+'</span>';
}
$('#page').html(page_str);
var constr=pageCon(arr,start,page_size);
$('#con').html(constr);
}
show(arr,2);
</script>
</body>
</html>
- js前臺(tái)分頁顯示后端JAVA數(shù)據(jù)響應(yīng)
- 純js分頁代碼(簡潔實(shí)用)
- javascript分頁代碼實(shí)例分享(js分頁)
- js寫的評(píng)論分頁(還不錯(cuò))
- js+css實(shí)現(xiàn)的簡單易用兼容好的分頁
- 純js寫的分頁表格數(shù)據(jù)為json串
- js對(duì)文章內(nèi)容進(jìn)行分頁示例代碼
- jsp分頁顯示完整實(shí)例
- js分頁工具實(shí)例
- JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁效果實(shí)例
- JS實(shí)現(xiàn)當(dāng)前頁居中分頁效果的方法
- Jquery+Ajax+Json+存儲(chǔ)過程實(shí)現(xiàn)高效分頁
- js腳本分頁代碼分享(7種樣式)
相關(guān)文章
JavaScript中Number.NEGATIVE_INFINITY值的使用詳解
這篇文章主要介紹了JavaScript中Number.NEGATIVE_INFINITY值的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06JavaScript的Polymer框架中dom-repeat與VM的相關(guān)操作
這篇文章主要介紹了JavaScript的Polymer框架中dom-repeat與VM的相關(guān)操作,Polymer是由Ggoogle開發(fā)的Web UI相關(guān)框架,需要的朋友可以參考下2015-07-07js數(shù)組方法擴(kuò)展實(shí)現(xiàn)數(shù)組統(tǒng)計(jì)函數(shù)
這篇文章主要介紹了js數(shù)組方法擴(kuò)展,實(shí)現(xiàn)數(shù)組統(tǒng)計(jì)函數(shù),需要的朋友可以參考下2014-04-04