JS 无刷新翻页

028wz

浏览: 9548 次
性别:
来自: 成都

最近访客更多访客>>

pengshiqin1993

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript

BODY：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="idData">
<tr><td></td></tr>

<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100216.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100216.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100222.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100222.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100233.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100233.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100246.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100246.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100253.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100253.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100309.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100309.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100312.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100312.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100318.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100318.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100324.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100324.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100336.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100336.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100356.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100356.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100413.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100413.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100515.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100515.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
<tr style="width:33%; float:left;">
<td><div style=" width:180px; padding:2px; border:1px solid #beb399; height:150px;overflow:hidden; margin-bottom:15px;">
<div style="position:relative; height:150px; display:table-cell;text-align:center; vertical-align:middle"><a href='/uploads/allimg/121203/1-121203100533.jpg' rel="example1" title='' style="position:static;+position:absolute; top:50%"><img src='/uploads/allimg/121203/1-121203100533.jpg' alt='' border='0' style="position:static; +position:relative; top:-50%;left:-50%;" /></a></div></div></td>
</tr>
</table>

<div id="barcon" name="barcon"></div>

JS:

<script>
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格行数
var totalPage = 0;//总页数
var pageSize = 12;//每页显示行数
if((num-1)/pageSize > parseInt((num-1)/pageSize)){ 
totalPage=parseInt((num-1)/pageSize)+1; 
}else{ 
totalPage=parseInt((num-1)/pageSize); 
} 
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 
var endRow = currentPage * pageSize+1;//结束显示的行 
endRow = (endRow > num)? num : endRow;
//前三行始终显示
for(i=0;i<1;i++){
var irow = itable.rows[i];
irow.style.display = "block";
}
for(var i=1;i<num;i++){
var irow = itable.rows[i];
if(i>=startRow&&i<endRow){
irow.style.display = "block"; 
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "共 "+totalPage+" 页　";
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页　</a>"
}else{
tempStr += ""; 
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>";
}else{
tempStr += ""; 
}
if(currentPage>1){
tempStr += "";
}else{
tempStr += "";
}
if(currentPage<totalPage){
tempStr += "";
}else{
tempStr += "";
}
document.getElementById("barcon").innerHTML = tempStr;
}
</script>

分享到：