该界面是用来实现分页下载的,一共显示五页页码,如图
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="${cxt}/css/common.css"/>
<link rel="stylesheet" type="text/css" href="${cxt}/css/main.css"/>
<link rel="stylesheet" type="text/css" href="${cxt}/css/style.css"/>
<script type="text/javascript" src="${cxt}/js/jquery-1.7.1min.js"></script>
<script type="text/javascript">
function chkall() {
var chall = document.getElementsByName("chall");
var chks = document.getElementsByName("chk");
for (var i = 0; i < chks.length; i++) {
chks[i].checked = chall[0].checked;
}
}
function check() {
var chall = document.getElementsByName("chall");
var chks = document.getElementsByName("chk");
var nums = 0;
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
++nums;
} else {
--nums;
}
if (nums == chks.length)
chall[0].checked = true;
else
chall[0].checked = false;
}
}
$(document).ready(
function() {
var uf_mob=$('#uf_mob').val();
if(uf_mob==null||uf_mob==''){
alert("会话已超时请您重新登录");
location.href="${cxt}/index.jsp";
}
operatePage();
});
function operatePage(){
$("#pageUtile").html("");
$("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage=${page.mCurrentPage-1}' class='page-prev'>上一页</a>")
if($("#allNum").val() < 6){
for(var i = 1; i < $("#allNum").val()*1+1*1; i++){
$("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")
}
}
else if($("#nowNum").val()*1+4*1<$("#allNum").val() ){
for(var i = $("#nowNum").val(); i < $("#nowNum").val()*1+5*1; i++){
$("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")
}
}else{
for(var i = $("#allNum").val()*1-4*1; i < $("#allNum").val()*1+1*1; i++){
$("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")
}
}
$("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage=${page.mCurrentPage+1}' class='page-next'>下一页</a>");
}
function download(){
var ids ="";
var chks = document.getElementsByName("chk");
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
ids += chks[i].value + ",";
}
}
if(ids==""){
alert("请选择需要下载的文件!");
return;
}
var url = "${cxt}/downloadFiles?ids="+ids;
location.href = url;
}
</script>
</head>
<body>
<div class="topbar-wrap white">
<div class="topbar-inner clearfix">
<div class="topbar-logo-wrap clearfix">
<h1 class="topbar-logo"><a href="index.html" class="navbar-brand">资料管理库</a></h1>
</div>
<div class="top-info-wrap">
<ul class="top-info-list clearfix">
<li><a href="${cxt}/index.jsp">退出</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="sidebar-wrap">
<div class="sidebar-content">
<ul class="sidebar-list">
<li>
<a href = "${cxt}/mobLogin/getDetailList?uf_mob=${userMap.UF_MOB}"><img class="icon-font" src="${cxt}/images/fill.png"/>个人信息</a>
</li>
<li>
<a href = "${cxt}/mobLogin/getFileList" class="on" href="${cxt}/mobLogin/getFileList"><img class="icon-font" src="${cxt}/images/down.png"/>下载资料</a>
</li>
<li>
<c:if test="${userMap.GROUPNAME=='培训部'}">
<a href="${cxt}/mobLogin/fileUpload"><img class="icon-font" src="${cxt}/images/up.png"/>上传资料</a>
</c:if>
</li>
</ul>
</div>
</div>
<!--/sidebar-->
<div class="main-wrap">
<div class="result-wrap">
<form name="myform" id="myform" method="post">
<div class="result-content">
<table class="result-tab" width="100%">
<tr>
<th class="tc" width="5%">
<input type="checkbox" name="chall" value="" class="allChoose" οnclick="chkall();">
</th>
<th>文件名称</th>
<th>添加时间</th>
<th>添加人</th>
</tr>
<c:forEach items="${resultBean.data}" var="data">
<tr>
<td class="tc"><input type="checkbox" name="chk"
value="${data.ID}" οnclick="check();"></td>
<td><span target="_blank" id = "${data.ID}" title="关于下发《信通(中国)投资有限公司员工考勤休假管理办法》的通知"> ${data.FILE_NAME} </span></td>
<td>${data.ADDTIME}</td>
<td>${data.ADD_PERSON}</td>
</tr>
</c:forEach>
</table>
<div class="btn">
<a class="btn-down" href="javascript:download();">下载</a>
</div>
<div class="page">
</div>
</div>
</form>
</div>
</div>
<!--/main-->
<div class="pagnation" id="pagnation" >
<li id="pageUtile" >
</li>
</div>
<div class="pagnation-tips">总[${page.mPages}]页 当前 [${page.mCurrentPage}]页</div>
</div>
<input type="hidden" id="uf_mob" value="${userMap.UF_MOB}"/>
<input type="hidden" id="nowNum" value="${page.mCurrentPage }"/><!-- 当前页 -->
<input type="hidden" id="allNum" value="${page.mPages}"/><!-- 总页数 -->
<input type="hidden" id="allCount" value="${page.mRecords }"/><!-- 总记录数 -->
</body>
</html>