<%@ page import="zhengcechaxun.Pd_zhengce" %>
<%@ page import="zhengcechaxun.Thesql" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>科技政策查询系统</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
.cloudTableAuto{
width:1200px;
margin:20px auto;
}
.cloudTable{
border: 1px solid #e0e6ed;
font-size: 16px;
width:100%;
}
.cloudTableTitle{
padding:10px 20px;
}
.cloudTable td {
height: 40px;
min-width: 0px;
box-sizing: border-box;
vertical-align: middle;
position: relative;
border-bottom: 1px solid #e0e6ed;
}
/* 表头 */
.cloudTable_header tr {
background-color: #efeff1;
}
.cloudTable_header th {
min-width: 0;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
border-bottom: 1px solid #e0e6ed;
border-right: 1px solid #e0e6ed;
padding: 10px 0px;
white-space: nowrap;
overflow: hidden;
font-weight: bold;
text-align:center;
}
/* 表身体 */
.cloudTable_body tr td {
height: 40px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.cloudTable_body tr td {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
border-right: 1px solid #e0e6ed;
}
.cloudMtxTable_body{
/*height:102px;*/
height:402px;
width:100%;
overflow-y: auto;
border-bottom: 1px solid #e0e6ed;
}
/* 公用样式 */
.data-cell {
padding-left: 15px;
padding-right: 15px;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.cloudTable_body tr:hover {
background-color: #c5e8fe;
}
</style>
</head>
<%
String name=request.getParameter("name");
String document=request.getParameter("document");
String organ=request.getParameter("organ");
int len;
Pd_zhengce[] pddsall=null;
Thesql thesql;
if(name==null){name="";}
if(document==null){document="";}
if(organ==null){organ="";}
thesql=new Thesql();
pddsall=thesql.policy_DimQuery(name,document,organ);
len= pddsall.length;
%>
<body onl oad="goPage(1,10);">
<div class="cloudTableAuto">
<!-- 第一个table -->
<table class="cloudTable cloudMtxTableHead">
<colgroup>
<col width="230px">
<col width="220px">
<col width="60px">
<col width="90px">
<col width="90px">
</colgroup>
<thead class="cloudTable_header">
<tr>
<th>政策名称</th>
<th>发文机构</th>
<th>颁布日期</th>
<th>政策分类</th>
<th>操作</th>
</tr>
</thead>
</table >
<div class="cloudMtxTable_body" >
<table style="table-layout:fixed;border: 1px solid #e0e6ed;font-size: 16px;width:100%;" id="idData" >
<colgroup >
<col width="230px">
<col width="220px">
<col width="60px">
<col width="90px">
<col width="90px">
</colgroup>
<tbody class="cloudTable_body ">
<%
for(int i=0;i<len;i++)
{
%>
<tr>
<td class="data-cell" ><%out.print(pddsall[i].name); %></td>
<td class="data-cell" ><%out.print(pddsall[i].organ); %></td>
<td ><%out.print(pddsall[i].pubdata); %></td>
<td ><%out.print(pddsall[i].type); %></td>
<td ><a href="">查看</a></td>
</tr>
<%}%>
</table>
</div>
<div class="cloudTableAuto" >
<table width="60%" align="center" >
<tr><td style="font-size:14px;"><div id="barcon" name="barcon"></div></td></tr>
</table>
<script type="text/javascript">
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格所有行数(所有记录数)
console.log(num);
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; 40
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "block";
irow.cells[0].style.width="290px";
irow.cells[1].style.width="220px";
irow.cells[2].style.width="60px";
irow.cells[3].style.width="90px";
irow.cells[4].style.width="90px";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
}else{
tempStr += "首页";
tempStr += "<上一页";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
tempStr += "下一页>";
tempStr += "尾页";
}
document.getElementById("barcon").innerHTML = tempStr;
}
</script>
</div>
</div>
</body>
</html>
标签：总结,box,12,num,pageSize,23.4,tempStr,var,border From： https://www.cnblogs.com/laobing6214/p/17309628.html