js 实现的前端分页功能
DOCTYPE html>
<html>
<head>
<title>t.htmltitle>
<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>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
<li>1li>
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 += ""+arr[i]+""
}
console.log(content);
$(id).html(content);
var ye = "";
for(var j=0;j<pagecount;j++){
ye += ""+id+"',"+(j+1)+","+pagesize+",'"+skipid+"')>"+(j+1)+"";
}
var contents = "共"+pagecount+"页/第"+page+"页";
contents += ""+ye+"";
contents += ""+id+"',"+(page-1)+","+pagesize+",'"+skipid+"')><<";
contents += ""+id+"',"+(page+1)+","+pagesize+",'"+skipid+"')>>>";
$(skipid).html(contents);
}
pager("#id1",0,pagesize,"#skip");
script>
html>
tips:以上代码只限于一次调用，多次调用存在bug，改良版：
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- 2