代码实现如下：
<!--
author@kwen Lee Works in October 9
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.1.0.min.js"></script>
</head>
<style>
table{margin:auto;}
#table1{margin-top:200px;}
#spanFirst,#spanPre,#spanNext,#spanLast:hover{cursor: pointer;}
</style>
<body>
<table width="500" border="0" cellpadding="5" cellspacing="1" id="table1">
<tbody id="table2">
<tr>
<td >11</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >12</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >13</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >14</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >15</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >16</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >17</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >18</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >19</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >20</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >21</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >22</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >11</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >12</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >23</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >24</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >25</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >26</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >27</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >28</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >29</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >30</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >31</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td >32</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
</tbody>
</table>
<table>
<tr><td>
<span id="spanFirst">第一页</span>
<span id="spanPre">上一页</span>
第<span id="spanPageNum"></span>页/
共<span id="spanTotalPage"></span>页
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span>
第<input id="count" value=""/>页 <button id="btn">↺ </button>
</td></tr>
</table>
<script>
var trs=$("#table2 tr");
var pagesize=3;
var curr=1;
var currRow=pagesize*curr;
var allpage=Math.ceil(trs.length/pagesize);
var currRow=pagesize*curr;
$("#table2 tr:odd").css("background","red");
$("#table2 tr:even").css("background","green");
//页面初始状态
$(document).ready(function(){
hideTab();
curr=1;
$("#table2 tr:lt(3)").css("display","block");
$("#spanTotalPage").text(allpage);
$("#spanPageNum").text(curr);
$("#count").css({"width":"20px","border-radius":"5px"});
});
//通用隐藏方法
function hideTab(){
trs.css("display","none");
}
//为下一页 绑定点击事件
function spanNext(){
hideTab();
if(curr>allpage-1){
curr=allpage;
}else{
curr++;
}
var currRow=pagesize*curr;
$.each(trs,function(index,value){
if(index<currRow&&index>=currRow-pagesize){
var that=this;
that.style.display="block";
}
});
$("#spanPageNum").text(curr);
}
$("#spanNext").bind("click",spanNext);
//为上一页 绑定点击事件
function spanPre(){
hideTab();
if(curr<2){
curr=1;
}else{
curr--;
}
var currRow=pagesize*curr;
$.each(trs,function(index,value){
if(index<currRow&&index>=currRow-pagesize){
var that=this;
that.style.display="block";
}
});
$("#spanPageNum").text(curr);
}
$("#spanPre").bind("click",spanPre);
//为第一页绑定点击事件
function spanFirst(){
hideTab();
curr=1;
var currRow=pagesize*curr;
$.each(trs,function(index,value){
if(index<currRow&&index>=currRow-pagesize){
this.style.display="block";
}
});
$("#spanPageNum").text(curr);
}
$("#spanFirst").bind("click",spanFirst);
//为最后一页绑定点击事件
function spanLast(){
hideTab();
curr=allpage;
var currRow=pagesize*curr;
$.each(trs,function(index,value){
if(index<currRow&&index>=currRow-pagesize){
this.style.display="block";
}
});
$("#spanPageNum").text(curr);
}
$("#spanLast").bind("click",spanLast);
//手动输入input值变化
//为btn绑定 点击按钮刷新事件
$("#btn").click(function(){
if ($("#count").val().trim() ==""){
spanFirst();
}else if($("#count").val()>=1&&$("#count").val()<=allpage){
hideTab();
curr=$("#count").val();
var currRow=pagesize*curr;
$.each(trs,function(index,value){
if(index<currRow&&index>=currRow-pagesize){
this.style.display="block";
}
});
$("#spanPageNum").text(curr);
}else{
alert("超出页数范围 或者 输入有误 \n请输入正确页码");
}
});
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-678205.html
