js 实现的前端分页功能
<!DOCTYPE html> <html> <head> <title>t.html</title> <meta name="content-type" content="text/html; charset=GB2312"> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <script src="js/jquery.js" ></script> </head> <style> span{ margin-right:10px; } </style> <body> <div id="demo"> <ul id='id1'> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div id='skip'></div> </div> </body> <script type="text/javascript"> var pagesize = 5; var arr = [],use=false; function pager(id,page,pagesize,skipid){ console.log(page) if(!use){ $(id+">li").each(function(i){ arr.push($(this).html()); }); use = true; } console.log(arr); var count = arr.length; var pagecount = Math.ceil(count/pagesize); $(id).html(""); if(page<1) page = 1; if(page > pagecount) page = pagecount; var content = ""; for(var i=(page*pagesize-pagesize);i<(page*pagesize>count?count:page*pagesize);i++){ content += "<li>"+arr[i]+"</li>" } console.log(content); $(id).html(content); var ye = ""; for(var j=0;j<pagecount;j++){ ye += "<span><a href='#' onclick=pager('"+id+"',"+(j+1)+","+pagesize+",'"+skipid+"')>"+(j+1)+"</a></span>"; } var contents = "<span>共"+pagecount+"页/第"+page+"页</span>"; contents += "<span>"+ye+"</span>"; contents += "<span><a href='#' onclick=pager('"+id+"',"+(page-1)+","+pagesize+",'"+skipid+"')><<</a></span>"; contents += "<span><a href='#' onclick=pager('"+id+"',"+(page+1)+","+pagesize+",'"+skipid+"')>>></a></span>"; $(skipid).html(contents); } pager("#id1",0,pagesize,"#skip"); </script> </html>
tips:以上代码只限于一次调用，多次调用存在bug，改良版：
<!DOCTYPE html>
<html>
<head>
<title>t.html</title>
<meta name="content-type" content="text/html; charset=GB2312">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<script src="js/jquery.js" ></script>
</head>
<style>
span{
margin-right:10px;
}
</style>
<body>
<div id="demo0">
<ul id='id0'>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div id='skip0'></div>
</div>
<div id="demo1">
<ul id='id1'>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<div id='skip1'></div>
</div>
</body>
<script type="text/javascript">
var pagesize = 5;
var json = {};
function pager(id,page,pagesize,skipid){
if(json[id]==undefined||json[id]['use']==false||json[id]['use']==undefined){
var arr = [],jsonitem={};
$(id+">li").each(function(i){
arr.push($(this).html());
});
jsonitem["arr"]=arr;
jsonitem["use"]= true;
json[id]=jsonitem;
}
console.log(json)
var arr = json[id]['arr'];
console.log(arr);
var count = arr.length;
var pagecount = Math.ceil(count/pagesize);
$(id).html("");
if(page<1)
page = 1;
if(page > pagecount)
page = pagecount;
var content = "";
for(var i=(page*pagesize-pagesize);i<(page*pagesize>count?count:page*pagesize);i++){
content += "<li>"+arr[i]+"</li>"
}
console.log(content);
$(id).html(content);
var ye = "";
for(var j=0;j<pagecount;j++){
ye += "<span><a href='#' onclick=pager('"+id+"',"+(j+1)+","+pagesize+",'"+skipid+"')>"+(j+1)+"</a></span>";
}
var contents = "<span>共"+pagecount+"页/第"+page+"页</span>";
contents += "<span>"+ye+"</span>";
contents += "<span><a href='#' onclick=pager('"+id+"',"+(page-1)+","+pagesize+",'"+skipid+"')><<</a></span>";
contents += "<span><a href='#' onclick=pager('"+id+"',"+(page+1)+","+pagesize+",'"+skipid+"')>>></a></span>";
$(skipid).html(contents);
}
pager("#id0",0,pagesize,"#skip0");
pager("#id1",0,pagesize,"#skip1");
</script>
</html>
