87,910
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页JS代码</title>
<style type="text/css">
.page{margin:2em;}
.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}
.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}
.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}
.mytable{
border:solid 1px #add9c0;
}
td,th{border:solid 1px #add9c0;}
</style>
</head>
<body>
<div id="div1" class="page"></div>
<div id="div2" class="page"></div>
</body>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////////////////////////////
//想在这里 进行数组的变化 然后传给下面的方法
//这也是我当前需要的写法
var b = [{ name: 1, phone: 1, value: 'val_1', newval: 'new1'},
{ name: 2, phone: 2, value: 'val_2', newval: 'new2'},
{ name: 3, phone: 3, value: 'val_3', newval: 'new3'},
{ name: 4, phone: 4, value: 'val_4', newval: 'new4'},
{ name: 5, phone: 5, value: 'val_5', newval: 'new5'},
{ name: 6, phone: 6, value: 'val_6', newval: 'new6'},
{ name: 7, phone: 7, value: 'val_7', newval: 'new7'},
{ name: 8, phone: 8, value: 'val_8', newval: 'new8'},
{ name: 9, phone: 9, value: 'val_9', newval: 'new9'},
{ name: 10, phone: 10, value: 'val_10', newval: 'new10'},
{ name: 11, phone: 11, value: 'val_11', newval: 'new11'},
{ name: 12, phone: 12, value: 'val_12', newval: 'new12'},
{ name: 13, phone: 13, value: 'val_13', newval: 'new13'},
{ name: 14, phone: 14, value: 'val_14', newval: 'new14'},
{ name: 15, phone: 15, value: 'val_15', newval: 'new15'},
{ name: 16, phone: 16, value: 'val_16', newval: 'new16'},
{ name: 17, phone: 17, value: 'val_17', newval: 'new17'},
{ name: 18, phone: 18, value: 'val_18', newval: 'new18'},
{ name: 19, phone: 19, value: 'val_19', newval: 'new19'},
{ name: 20, phone: 20, value: 'val_20', newval: 'new20'},
{ name: 21, phone: 21, value: 'val_21', newval: 'new21'},
{ name: 22, phone: 22, value: 'val_22', newval: 'new22'},
{ name: 23, phone: 23, value: 'val_23', newval: 'new23'},
{ name: 24, phone: 24, value: 'val_24', newval: 'new24'}
];
</script>
<script type="text/javascript">
//container 容器,count 总条数 pageindex 当前页数
function setPage(container,pageindex,pagesize,b) {
//div1 13 5 b
var count = b.length;//总条数
var container = container; //容器
var totalPage = Math.ceil(count/pagesize); //总页数
var pageindex = pageindex; //当前页数
var pagesize = pagesize;//每页大小
var a_html = [];//分页插件html代码
//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
if (pageindex == 1) {
console.log(a_html[a_html.length]);
a_html[a_html.length] = "<a href=\"#\" class=\"prev unclick\">prev</a>";
} else {
a_html[a_html.length] = "<a href=\"#\" class=\"prev\">prev</a>";
}
function setPageList() {
if (pageindex == i) {
a_html[a_html.length] = "<a href=\"#\" class=\"on\">" + i + "</a>";
} else {
a_html[a_html.length] = "<a href=\"#\">" + i + "</a>";
}
}
//总页数小于10
if (totalPage <= 10) {
for (var i = 1; i <= totalPage; i++) {
setPageList();
}
}//总页数大于10页
else {
if (pageindex <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a_html[a_html.length] = "...<a href=\"#\">" + totalPage + "</a>";
} else if (pageindex >= totalPage - 3) {
a_html[a_html.length] = "<a href=\"#\">1</a>...";
for (var i = totalPage - 4; i <= totalPage; i++) {
setPageList();
}
}
else { //当前页在中间部分
a_html[a_html.length] = "<a href=\"#\">1</a>...";
for (var i = pageindex - 2; i <= pageindex + 2; i++) {
setPageList();
}
a_html[a_html.length] = "...<a href=\"#\">" + totalPage + "</a>";
}
}
if (pageindex == totalPage) {
a_html[a_html.length] = "<a href=\"#\" class=\"next unclick\">next</a>";
} else {
a_html[a_html.length] = "<a href=\"#\" class=\"next\">next</a>";
}
container.innerHTML = a_html.join("");
//table 生成
var tempHtml = "<table class=\"mytable\"><tr><th>名字</th><th>电话</th><th>value</th><th>newval</th></tr>";
if(count%pagesize!=0 && pageindex==totalPage){
for (var i = 0; i < count%pagesize; i++) {
tempHtml +=
"<tr><td>"+b[(pageindex-1)*pagesize+i].name+"</td><td>"+b[(pageindex-1)*pagesize+i].phone+"</td><td>"+b[(pageindex-1)*pagesize+i].value+"</td><td>"+b[(pageindex-1)*pagesize+i].newval+"</td></tr>";
}
}else{
for (var i = 0; i < pagesize; i++) {
tempHtml +=
"<tr><td>"+b[(pageindex-1)*pagesize+i].name+"</td><td>"+b[(pageindex-1)*pagesize+i].phone+"</td><td>"+b[(pageindex-1)*pagesize+i].value+"</td><td>"+b[(pageindex-1)*pagesize+i].newval+"</td></tr>";
}
}
tempHtml += "</table>";
document.getElementById('div1').innerHTML = tempHtml;
//事件点击
var pageClick = function () {
var oAlink = container.getElementsByTagName("a");
var inx = pageindex; //初始的页码
oAlink[0].onclick = function () { //点击上一页
if (inx == 1) {
return false;
}
inx--;
setPage(container, inx,pagesize,b);
return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //点击页码
oAlink[i].onclick = function () {
inx = parseInt(this.innerHTML);
setPage(container, inx,pagesize,b);
return false;
}
}
oAlink[oAlink.length - 1].onclick = function () { //点击下一页
if (inx == totalPage) {
return false;
}
inx++;
setPage(container, inx,pagesize,b);
return false;
}
} ()
}
//在这初始化参数依次为,填充分页插件的dom,初始显示页码(通常默认显示第1页,初始页码不要大于总页码),每页显示条数,以及传进去的array
setPage(document.getElementsByTagName("div")[1], 1,3,b);
</script>
</html>