实用的静态前端分页实例

标签：

#################################### CSS样式 ###################################

.hotel-table{ border-collapse:collapse; width:100%;}
.hotel-table th{ font-weight:normal; background:#f0f0f0; color:#000; height:29px; line-height:29px; white-space:nowrap; }
.hotel-table td{text-align:center; height:28px; line-height:28px;color:#757575; line-height:20px;border-bottom:1px solid #f0f0f0; white-space:nowrap;}

###########################JavaScript脚本#################################
<script type="text/javascript">
var MAX_PAGE_SIZE = 12;
//更多列表空行及分页控件填充
$(document).ready(function() {
$(".hotel-table").each(function () {
var length = $(this).find("tbody tr").length;
var tdLength = $(this).find("thead tr th").length;
var tdHtml = "";
for (var i = 0; i < tdLength; i++) {
tdHtml += "<td></td>";
}
while (length % MAX_PAGE_SIZE != 0) {
$(this).find("tbody").append("<tr>" + tdHtml + "</tr>");
length++;
}
var pagerHtml = "";
for (var i = 0, j = length / MAX_PAGE_SIZE; i < j; i++) {
pagerHtml += "<a href=‘javascript:;‘ onclick=‘goPage1(this);‘ forward=‘" + (i + 1) + "‘>" + (i + 1) + "</a>";
}
$(this).closest("div").find(".page a").eq(1).after(pagerHtml);
$(this).closest("div").find(".page a").eq(2).addClass("current");
$(this).closest("div").find(".page a:first").trigger("click");
//goFirst();
});
});
//资源列表前台分页
function goFirst1(aObj) {
var divObj = $(aObj).closest("div").parent("div");
var tbodyObj = $(divObj).find(".hotel-table tbody");
$(tbodyObj).find("tr").each(function(n) {
if(n >= 0 && n < MAX_PAGE_SIZE) {
$(this).show();
}else{
$(this).hide();
}
});
$(divObj).find(".page").find("a.current").removeClass("current");
$(divObj).find(".page").find("a").eq(2).addClass("current");
}

function goPrev1(aObj) {
var divObj = $(aObj).closest("div").parent("div");
var forward = $(divObj).find(".page").find("a.current").attr("forward");
forward = parseInt(forward);
var tbodyObj = $(divObj).find(".hotel-table tbody");
if(forward != 1) {
forward--;
$(tbodyObj).find("tr").each(function(n) {
if(n >= MAX_PAGE_SIZE*(forward-1) && n < MAX_PAGE_SIZE*forward) {
$(this).show();
}else{
$(this).hide();
}
});
$(divObj).find(".page").find("a.current").removeClass("current").prev("a").addClass("current");
}
}

function goPage1(aObj) {
var divObj = $(aObj).closest("div").parent("div");
var forward = $(aObj).attr("forward");
forward = parseInt(forward);
var tbodyObj = $(divObj).find(".hotel-table tbody");
$(tbodyObj).find("tr").each(function(n) {
if(n >= MAX_PAGE_SIZE*(forward-1) && n < MAX_PAGE_SIZE*forward) {
$(this).show();
}else{
$(this).hide();
}
});
$(divObj).find(".page").find("a.current").removeClass("current");
$(divObj).find(".page").find("a").eq(forward+1).addClass("current");
}

function goNext1(aObj) {
var divObj = $(aObj).closest("div").parent("div");
var forward = $(divObj).find(".page").find("a.current").attr("forward");
forward = parseInt(forward);
var tbodyObj = $(divObj).find(".hotel-table tbody");
var length = $(tbodyObj).find("tr").length;
if(forward != length/MAX_PAGE_SIZE) {
forward++;
$(tbodyObj).find("tr").each(function(n) {
if(n >= MAX_PAGE_SIZE*(forward-1) && n < MAX_PAGE_SIZE*forward) {
$(this).show();
}else{
$(this).hide();
}
});
$(divObj).find(".page").find("a.current").removeClass("current").next("a").addClass("current");
}
}

function goLast1(aObj) {
var divObj = $(aObj).closest("div").parent("div");
var tbodyObj = $(divObj).find(".hotel-table tbody");
var length = $(tbodyObj).find("tr").length;
var finalPageNum = length/MAX_PAGE_SIZE;
$(tbodyObj).find("tr").each(function(n) {
if(n >= MAX_PAGE_SIZE*(finalPageNum-1) && n < MAX_PAGE_SIZE*finalPageNum) {
$(this).show();
}else{
$(this).hide();
}
});
$(divObj).find(".page").find("a.current").removeClass("current");
$(divObj).find(".page").find("a").eq(finalPageNum+1).addClass("current");
}
</script>

################################# JSP页面 ##############################################
<div id="hotel" >
<table class="hotel-table" style="width: 99%; table-layout: fixed; margin: 0 auto;">
<thead>
<tr>
<th width="5%">序号</th>
<th width="10%">姓名</th>
<th width="20%">身份证号</th>
<th width="20">旅馆名称</th>
<th width="20">地址</th>
<th width="5">房间号</th>
<th width=10"">入住时间</th>
<th width="10">退房时间</th>
</tr>
</thead>
<tbody>
<c:forEach var="item" items="${hotelRegistList}" varStatus="status">
<tr>
<td>${status.count}</td>
<td>${item.xm}</td>
<td>${item.sfzh}</td>
<td>${item.lgmc}</td>
<td>${item.dz}</td>
<td>${item.fjh}</td>
<td>${item.inTime}</td>
<td>${item.outTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="page">
<a href="javascript:;" onclick="goFirst1(this);">&lt;&lt;</a>
<a href="javascript:;" onclick="goPrev1(this);">&lt; </a>
<a href="javascript:;" onclick="goNext1(this);">&gt;</a>
<a href="javascript:;" onclick="goLast1(this);" class="last">&gt;&gt;</a>
</div>
</div>

实用的静态前端分页实例

标签：

原文地址：http://www.cnblogs.com/cst11021/p/5036373.html