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>
分享到:
相关推荐
自动生成页码,支持ajax无刷新翻页,修改也蛮简单方便的
table表格无刷新翻页排序,是基于JS的调用,很方便的table翻页
利用JS实现动态无刷新翻页
Jquery结合angular.js与bootstrap.js实现的无刷新翻页+查找特效源码.zip
java语言查询oracle数据库返回xml结合Ajax jquery json 的无刷新翻页案例,底层代码重用性强,页面js已经分离可直接导入使用。
js+css翻页时钟插件
<title>Porschev----无刷新翻页</title> <script src="Script/jquery-1.4.1.min.js" src="Script/jquery-1.4.1.min.js" type="text/javascript"> <script src="Script/jquery.pagination.js" mce_src="Script/...
在界面中,使用纯js完成。把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基
该控件存在严重BUG,请勿下载。(无法控制第一次加载控件的大小)
java语言查询oracle数据库返回json结合Ajax jquery json 的无刷新翻页案例,底层代码重用性强,页面js已经分离可直接导入使用。
动态滚动加载数据 页面滚动分页---iScroll实例:下拉刷新,滚动翻页
翻页插件有很多种,做出来的效果都非常棒,这篇文章主要介绍了jQuery 翻页组件yunm.pager.js实现div局部刷新的思路,非常不错,需要的朋友可以参考下
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo,兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
ajax实现翻页在实际应用中还是比较常见的,实现ajax翻页有两部分:js部分、html部分,具体如下,感兴趣的朋友可以参考下,希望对大家有所帮助
Ajax结合SQL Server实现的无刷新幻灯片切换效果源码,有暂停、运行、翻页等按钮
做单页面的静态化,索引页面是用JS对数组进行组合的。 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: ...
基于JQuery的Js无刷新分页绑定数据,运行于ASP.NET环境,直接打开演示页面会导致出错。程序实现方面:先取得分页总数,把分页总数放到变量pageCount里,隐藏loading提示,设置翻页按钮的初始状态,绑定第一页的数据...