<!DOCTYPE html>
<html>
<head>
<title>JqueryPage.html</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var pageSize = 15; //每页显示的记录条数
var curPage = 0; //当前页
var lastPage; //最后页d
var page = 0; //方向
var totalRows; //总行数
var totalPage; //总页数
var begin;
var end;
$(document).ready(function display(){
totalRows =$("#mytable tr").length - 1; // 求这个表的总行数,剔除第一行列头
totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数,计算页数
// alert("totalPage==="+totalPage);
curPage=1; // 设置当前为第一页
displayPage(1);//显示第一页
document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页 每页 "; // 显示当前多少页
document.getElementById("tatalrow").innerHTML="数据总量 " + totalRows + ""; // 显示数据量
document.getElementById("pageSize").value = pageSize;
$("#fristPage").click(function firstPage(){ // 首页
curPage=1;page = 0; displayPage();
});
$("#upPage").click(function frontPage(){ // 上一页
page=-1;displayPage();
});
$("#nextPage").click(function nextPage(){ // 下一页
page=1; displayPage();
});
$("#lastPage").click(function lastPage(){ // 尾页
curPage=totalPage;
page = 0;
displayPage();
});
$("#goto").click(function changePage(){ // 转页
curPage=document.getElementById("changePage").value * 1;
if (!/^[1-9]\d*$/.test(curPage)) {//alert("请输入正整数");
return ;
}
if (curPage > totalPage) {// alert("超出数据页面");
return ;
}
page = 0;
displayPage();
});
$("#pageSizeSet").click(function setPageSize(){ // 设置每页显示多少条记录
pageSize = document.getElementById("pageSize").value; //每页显示的记录条数
if (!/^[1-9]\d*$/.test(pageSize)) {// alert("请输入正整数");
return ;
}
totalRows =$("#mytable tr").length - 1;
totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数,计算页数
curPage=1; //当前页
page=0; //方向
});
});
function displayPage(){
if(curPage <=1 && page==-1){
page=0;//alert("已经是第一页了");
return;
} else if (curPage >= totalPage && page==1) {
page=0;// alert("已经是最后一页了");
return ;
}
lastPage = curPage;// 修复当totalRows=1时,curPage计算得0的bug
if (totalRows > pageSize) {
curPage = ((curPage + page + totalRows) % totalRows);
} else {
curPage = 1;
}
document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页 每页 "; // 显示当前多少页
begin=(curPage-1)*pageSize + 1;// 起始记录号
end = begin + 1*pageSize - 1; // 末尾记录号
if(end > totalRows ) end=totalRows;
$("#mytable tr").hide(); // 首先,设置这行为隐藏
$("#mytable tr").each(function(i){ // 然后,通过条件判断决定本行是否恢复显示
if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
$(this).show();
});
}
</script>
</head>
<body>
<a id="currPage"></a>
<input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a>
<a id="tatalrow"></a>
<a href="#" id="fristPage">首页</a>
<a href="#" id="upPage">上一页</a>
<a href="#" id="nextPage">下一页</a>
<a href="#" id="lastPage">尾页</a>
<a>转到 </a>
<input id="changePage" type="text" size="1" maxlength="4"/>
<a>页 </a>
<a href="#" id="goto">跳转</a>
<table id="mytable" align="center" class="table table-hover table-condensed table-bordered">
<tr>
<th>哈哈哈</th>
<th>哈哈哈</th>
<th>哈哈哈</th>
<th>哈哈哈</th>
<th>哈哈哈</th>
<th>哈哈哈</th>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>2234567</td>
</tr>
<tr>
<td>4</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr><tr>
<td>5</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>6</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>7</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>8</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>9</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>10</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>11</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>12</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>13</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>14</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>15</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
<tr>
<td>16</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
<td>2234567</td>
</tr>
</table>
</body>
</html>
原生JQUERY html5 分页
最新推荐文章于 2023-11-22 14:54:26 发布