二十几个静态页,想做出第一页,上一页,本页,下一页和最后一页的效果,用JS能实现吗,文件名,PAGE1.HTML,PAGE2.HTML......PAGE19.HTML
解决方案 »
- 关于javascript中dom问题
- 用脚本实现打开一个无菜单的窗口，怎么让它的默认位置在屏幕右上角
- js调用后台代码 带参 传值问题
- 调用兄弟框架中的函数，第一次进入总提示错误
- 两个方本框,只有其中一个不能为空,如果验证不通过,则通能在这两文件框上移动
- 现在正在研究prototype的源代码，但一直不明白extend是什么东西
- 能不能象传值一样,传递对象啊??
- 请教:在网页中,如何取得用mouse选取的内容?
- 百度地图API BMap.Circle 循环画圆 有问题...
- uploadify上传插件,如何在后期更改fileTypeExts
- 打开页面特效功能
- js 获取mediaplayer 下载百分比
方法2：JS+CSS 控制层的显示，做伪效果。
方法3：URL重定向。
方法4：伪静态。不知道你想要的是哪种？
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表格分页显示</title></head><body>
<div id="divTable">
<table border="1" cellpadding="0" cellspacing="0" id="tab1">
<tbody><tr>
<td width="73"> 序号</td>
<td width="223"> 标题</td>
<td width=80> 作者</td>
<td width=100> 发表时间</td></tr><tr height="20">
<td width="73">00</td>
<td width="223" align="left"><a href="###">00</a></td>
<td width=80>00</td>
<td width=100>00</td></tr><tr height="20">
<td width="73">11</td>
<td width="223" align="left"><a href="###">11</a></td>
<td width=80>11</td>
<td width=100>11</td></tr><tr height="20">
<td width="73">22</td>
<td width="223" align="left"><a href="###">22</a></td>
<td width=80>22</td>
<td width=100>22</td></tr><tr height="20">
<td width="73">33</td>
<td width="223" align="left"><a href="###">33</a></td>
<td width=80>33</td>
<td width=100>33</td></tr><tr height="20">
<td width="73">44</td>
<td width="223" align="left"><a href="###">44</a></td>
<td width=80>44</td>
<td width=100>44</td></tr><tr height="20">
<td width="73">55</td>
<td width="223" align="left"><a href="###">55</a></td>
<td width=80>55</td>
<td width=100>55</td></tr><tr height="20">
<td width="73">66</td>
<td width="223" align="left"><a href="###">66</a></td>
<td width=80>66</td>
<td width=100>66</td></tr><tr height="20">
<td width="73">77</td>
<td width="223" align="left"><a href="###">77</a></td>
<td width=80>77</td>
<td width=100>77</td></tr><tr height="20">
<td width="73">88</td>
<td width="223" align="left"><a href="###">88</a></td>
<td width=80>88</td>
<td width=100>88</td></tr><tr height="20">
<td width="73">99</td>
<td width="223" align="left"><a href="###">99</a></td>
<td width=80>99</td>
<td width=100>99</td></tr>
</table>
</div>
<br>
<input id="first" type=button value="第一页" onclick="firstOrLast(0)">
<input id="back" type=button value="上一页" onclick="N(-1)">
<input id="next" type=button value="下一页" onclick="N(1)">
<input id="last" type=button value="最后一页" onclick="firstOrLast(1)">
<script language="javascript">
<!--
var pageSize=4,currentPageNum=1,totlePageNum
var obj,totleRows,totleCols
var rowHeigth = 20;
var obj=document.getElementById('tab1').rows;
onload=function(){
totleRows=obj.length;
totleCols=document.getElementById('tab1').rows(0).cells.length;
totlePageNum=Math.ceil((totleRows-1)/pageSize)
//如果某一页行数小于pageSize，则增加空行
if(totleRows==0 || (totleRows-1)%pageSize != 0){
var tempCols
if(totleRows==0)
tempCols = totleCols;
else tempCols = pageSize-(totleRows-1)%pageSize;
for(i=0;i<tempCols;i++){
var newBlankRow = document.getElementById('tab1').insertRow();
var point = newBlankRow.rowIndex;
for (m=0; m < totleCols; m++) {
obj[point].insertCell();
obj[point].cells(m).innerHTML = " ";
}
}
totleRows = document.getElementById('tab1').rows.length;
} N(0)
}
function resetStyle(){
for (var i=1;i<totleRows;i++)obj[i].style.display="none"
}
function N(k){
if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return;
currentPageNum+=k;
resetStyle();
toPage(currentPageNum);
filter(currentPageNum);
}
function firstOrLast(flag){
if(flag==0)
currentPageNum = 1;
else if(flag==1)
currentPageNum = totlePageNum;
else
return ;
resetStyle();
toPage(currentPageNum);
filter(currentPageNum);}
function toPage(currentPageNum){
for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++)
obj[i].style.display="";
}function filter(currentPageNum){
//如果是第一页，则“上一页”不可用
if(currentPageNum-1<1) {
document.getElementById("back").disabled=true;
document.getElementById("first").disabled=true;
}
else{
document.getElementById("back").disabled=false;
document.getElementById("first").disabled=false;
}
//如果是最后一页，则"下一页"不可用
if(currentPageNum+1>totlePageNum ) {
document.getElementById("next").disabled=true;
document.getElementById("last").disabled=true;
}
else{
document.getElementById("next").disabled=false;
document.getElementById("last").disabled=false;
}
}
//-->
</script></body></html>
var url=location.href,start=1,end=19;//定义开始页和结尾页
var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页，注意如果你的名称不为page的，修改此正则
if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');
else document.write('<a href="page'+start+'.html">首页</a> <a href="page'+(currentPage-1)+'.html">上一页</a>');
document.write(' 当前页：'+currentPage+' ');
if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');
else document.write('<a href="page'+(currentPage+1)+'.html">下一页</a> <a href="page'+end+'.html">尾页</a>');
</script>
<script>
var url=location.href,start=1,end=19;//定义开始页和结尾页
var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页，注意如果你的名称不为page的，修改此正则
if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');
else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+start+'.html">首页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage-1)+'.html">上一页</a>');
document.write(' 当前页：'+currentPage+' ');
if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');
else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage+1)+'.html">下一页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+end+'.html">尾页</a>');
</script>这样改正确吗??