网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js+table分页标题头不变

关注我吧
 2012/7/20 15:25:24 阅读次数:6319

下面是一段js+table分页,主要思路是把每个tr做为一个元素,前提是表格已经生成。一起加起来放在一个数组里面。每页显示5条数据,然后判断在哪个页面。从数组显示出当前页面的数据。

效果图下如所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分页</title>
<style>
table{border:1px solid #f60;BORDER-COLLAPSE:collapse;border-spacing:0;margin-bottom:10px}
table td{border:1px solid #f60;font-size:12px;line-height:25px;}
table .title{background:#FFCC00;height:30px;line-height:30px;}
.h{width:100px;text-align:center}
a{padding:3px 5px;background:#f60;color:#fff;display:inline-block;margin:0 3px;border:1px solid #f60;text-decoration:none;}
em{font-style:normal;padding:3px 5px;display:inline-block;background:#eee;border:1px solid #ccc}
</style>
</head>
<body>
<table width="100" border="0" id="tablelist" style="display:none;">
	<thead><tr class="title"><th class="h">标题</th></tr></thead>
	<tr><td>测试分页1</td></tr>
	<tr><td>测试分页2</td></tr>
	<tr><td>测试分页3</td></tr>
	<tr><td>测试分页4</td></tr>
	<tr><td>测试分页5</td></tr>
	<tr><td>测试分页6</td></tr>
	<tr><td>测试分页7</td></tr>
	<tr><td>测试分页8</td></tr>
	<tr><td>测试分页9</td></tr>
	<tr><td>测试分页10</td></tr>
	<tr><td>测试分页11</td></tr>
	<tr><td>测试分页12</td></tr>
	<tr><td>测试分页13</td></tr>
	<tr><td>测试分页14</td></tr>
	<tr><td>测试分页15</td></tr>
	<tr><td>测试分页16</td></tr>
	<tr><td>测试分页17</td></tr>
	<tr><td>测试分页18</td></tr>
</table>
<script>
function Request(strName)
{
    var strHref = window.document.location.href;
    var intPos = strHref.indexOf("?");
    var strRight = strHref.substr(intPos + 1);
    var arrTmp = strRight.split("&");
    for(var i = 0; i < arrTmp.length; i++)
    {
        var arrTemp = arrTmp[i].split("=");
        if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
    }
    return "";
}
var tb="";
var n=5;//每页5行
if(Request("p")==null || Request("p")=="")//第一次没有传第几页
	page=0;//初始化
else
	page=Request("p");//有值取第几页
	
	
var tablist=document.getElementById("tablelist").getElementsByTagName('tr');//遍历所有tr
var trlist=tablist[1].parentNode.innerHTML;//获取所有非标题的TR
var trtitle=tablist[0].parentNode.innerHTML;//获取第一个Tr作为标题
var isie=document.all ? 'IE' : 'others';
//IE显示的是大写的tr,而FF显示的是小写的tr判断
if(isie=="IE") 
	var trarray=trlist.split('</TR>');
else
	var trarray=trlist.split('</tr>');
//alert(trarray[0]);
var showtr=new Array();
var ds="";
for(i=0;i<trarray.length-1;i++)
{
	showtr[i]=trarray[i]+"</tr>";
	ds+=trarray[i]+"</tr>";
}


var code =showtr;

for(i=1;i<tablist;i++)
{
	tablist[0].parentNode.innerHTML
}

var allpage=parseInt(code.length/n);
if(allpage<code.length/n)
{
	allpage+=1;
}

var wpage,pcount;
if(page>=1)
{
	wp=(page-1)*n;//(page-1)*n第几页开始数,(page-1)*n+n开始数加上每页数
	pcount=wp+n;
}
else
{
	wp=page*n;//(page)*n第几页开始数,(page)*n+n开始数加上每页数
	pcount=wp+n;
	page=1;//设置传递时第一页显示当前页面
}
//alert(allpage+"-"+page);
tb+="<table width='100'>"
tb+=trtitle;
for(var i=wp;i<pcount;i++)
{
  if(code[i]==null)//如果值为空则不输出
	break;
  tb+=code[i];
  
}
tb+="</table>";
function setpage(allpage,page){//获取分页、当前页
	palist="<div>";
	//alert(page);
	for(i=0;i<allpage;i++){	
		if(parseInt(i+1)!=page)
			palist+="<a href='?p="+ parseInt(i+1)+"'>"+parseInt(i+1)+"</a>";
		else
			palist+="<em>"+ parseInt(i+1) +"</em>"
	}
	return palist+="</div>";	
}
var ouput=tb+setpage(allpage,page);
document.write(ouput);
</script>
</body>
</html>

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭