要求：
项目功能说明：
科技政策查询主界面样式如下图所示主界面主要分成五部分：
1、顶部为LOGO区，主要展示科技技术情报研究院的LOGO，并用蓝黑色显示科技政策查询系统。
2、第二部分为多条件查询区，主要包括政策图解（按钮式超级链接），查询条件包括政策名称、政策文号、发文机构、全文检索四个查询条件，可以根据四个条件进行综合查询。
3、第三部分为左侧科技政策分类树形结构，要求从policy_kind科技政策分类表中读取科技政策分类属性，后面括号内标注的是属于这个分类的科技政策数量，政策数量的统计来源于科技政策数据库。点击相关的分类，右侧的政策接过去显示相应数量的科技政策列表。
4、第四部分为右侧政策查询结果显示区，显示科技政策查询结果列表，点击查看或者具体的政策名称，跳转到政策详细信息显示界面（如下图所示）。
查询结果列表包括政策名称、发文机构、颁布日期、政策分类、操作五项内容。
显示结果要求：
（1）结果表标题政策名称包括政策名称、发文机构、颁布日期、政策分类、操作五个标题居中显示。
（2）政策名称、发文机构结果列表左对齐，颁布日期、政策分类、操作的结果列表居中显示。
（3）要求分页显示，按照图示要求。
5、底部的系统说明区：要求按照样式加载：Copyright 1996-2022 All Rights Reserved 版权所有：河北省科学技术情报研究院 河北省科技创新战略研究院 技术支持：河北省科技信息处理实验室。
效果：
test.jsp
<%@ page language= "java" contentType= "text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ page import="java.sql.*"%>
<title>www.jb51.net JS分页</title>
<style type="">
td{
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}</style>
<script>
/**
* 分页函数
* 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 = 12;//每页显示行数
//总共分几页
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";
}else{
irow.style.display = "none";
}
}
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>
<script th:src="@{/layuimini/js/lay-module/echarts/echarts.js}"></script>
<script th:src="@{/layuimini/js/lay-module/echarts/wordcloud.js}"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body onl oad="goPage(1,10);">
<div style="text-align:center;">
<img src="LOGO.png" width="40" height="40" style="margin-right: 10px;">
<span style="font-size: 35px; color:#1571b2;">科技政策查询系统</span>
</div>
<div style="text-align:center;width:100%;height:65px;float:left; position:relative; display: table-cell;vertical-align: middle; background-color: rgba(232,232,232,0.76) ">
<form class="layui-form"action="test1.jsp" >
<p> </p>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">
政策名称：
</label>
<div class="layui-input-inline">
<input type="text" name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">
政策文号：
</label>
<div class="layui-input-inline">
<input type="text" name="document" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">
发文机构：
</label>
<div class="layui-input-inline">
<input type="text" name="organ" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1"style="background-color: #1571b2">查询</button>
</div>
</div>
</div>
</form>
</div>
<div class="container3" id="container3">
<form action="test1.jsp">
<table id="idData" border="1px" align="center" class="layui-table"style="table-layout: fixed;word-wrap:break-word;" >
<thead>
<tr align="center">
<td style="width: 320px">政策名称</td>
<td style="width:320px">发文机构</td>
<td style="width: 320px">颁布日期</td>
<td style="width:320px">政策分类</td>
</tr>
</thead>
<%
String a=request.getParameter("name");
String b=request.getParameter("document");
String c=request.getParameter("organ");
String URL = "jdbc:mysql://localhost:3306/info ";
String USERNAME = "root";
String PWD = "PENGsuoqun123";
//jsp就是在html中嵌套的java代码，因此java代码可以写在jsp中（《%%》）
PreparedStatement pstmt = null;
ResultSet rs=null;
Connection connection = null;
try {
// a.导入驱动，加载具体驱动类
Class.forName("com.mysql.cj.jdbc.Driver");//注册// 加载具体的驱动类
// b.与数据库建立链接
connection = DriverManager.getConnection(URL, USERNAME, PWD);
String sql ="select * from policy order by id desc" ;
pstmt=connection.prepareStatement(sql);
rs= pstmt.executeQuery();// 反回值，增删改了几条数据增删改用update
while(rs.next()) {
//政策名称
String name=rs.getString("name");
//发文机构
String organ=rs.getString("organ");
//颁布时间
String pubdata=rs.getString("pubdata");
//政策分类
String type=rs.getString("type");
%>
<tbody>
<tr align="center">
<td style="width: 320px" title="<%=name %>"><a href="neirong.jsp?name=<%=name %>"><%out.print(name);%></td>
<td style="width: 320px" title="<%=organ %>"><%out.print(organ);%></td>
<td style="width: 320px" title="<%=pubdata %>"><%out.print(pubdata);%></td>
<td style="width: 320px" title="<%=type %>"><%out.print(type);%></td>
</tr>
<%}
}
catch (ClassNotFoundException e) {
e.printStackTrace();
}
catch (SQLException e) {
e.printStackTrace();
}
catch (Exception e) {
e.printStackTrace();
}
finally {
// 关闭数据库
try{//先开的后关
if(rs!=null)rs.close();
if(pstmt!=null)pstmt.close();// 对象.方法
if(connection!=null)connection.close();
}
catch( SQLException e){
e.printStackTrace();
}
}
%>
</tbody>
</table>
</form>
</div>
<table width="100%" align="center">
<tr><td style="text-align:center;"><div id="barcon" name="barcon"></div></td></tr>
</table>
</body>
</html>
test1.jsp
<%@ page language= "java" contentType= "text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ page import="java.sql.*"%>
<title>www.jb51.net JS分页</title>
<style type="">
td{
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}</style>
<script>
/**
* 分页函数
* 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 = 12;//每页显示行数
//总共分几页
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";
}else{
irow.style.display = "none";
}
}
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>
<script th:src="@{/layuimini/js/lay-module/echarts/echarts.js}"></script>
<script th:src="@{/layuimini/js/lay-module/echarts/wordcloud.js}"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body onl oad="goPage(1,10);">
<div style="text-align:center;">
<img src="LOGO.png" width="40" height="40" style="margin-right: 10px;">
<span style="font-size: 35px; color:#1571b2;">科技政策查询系统</span>
</div>
<div style="text-align:center;width:100%;height:65px;float:left; position:relative; display: table-cell;vertical-align: middle; background-color: rgba(232,232,232,0.76) ">
<form class="layui-form"action="jieguo1.jsp" method="post" target="hideIframe1" >
<p> </p>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">
政策名称：
</label>
<div class="layui-input-inline">
<input type="text" name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">
政策文号：
</label>
<div class="layui-input-inline">
<input type="text" name="document" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">
发文机构：
</label>
<div class="layui-input-inline">
<input type="text" name="organ" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1"style="background-color: #1571b2">查询</button>
</div>
</div>
</div>
</form>
</div>
<div class="container3" id="container3">
<form action="jieguo1.jsp">
<table id="idData" border="1px" align="center" class="layui-table"style="table-layout: fixed;word-wrap:break-word;" >
<thead>
<tr align="center">
<td style="width: 320px">政策名称</td>
<td style="width:320px">发文机构</td>
<td style="width: 320px">颁布日期</td>
<td style="width:320px">政策分类</td>
</tr>
</thead>
<%
String a=request.getParameter("name");
String b=request.getParameter("document");
String c=request.getParameter("organ");
String URL = "jdbc:mysql://localhost:3306/info ";
String USERNAME = "root";
String PWD = "PENGsuoqun123";
//jsp就是在html中嵌套的java代码，因此java代码可以写在jsp中（《%%》）
PreparedStatement pstmt = null;
ResultSet rs=null;
Connection connection = null;
try {
// a.导入驱动，加载具体驱动类
Class.forName("com.mysql.cj.jdbc.Driver");//注册// 加载具体的驱动类
// b.与数据库建立链接
connection = DriverManager.getConnection(URL, USERNAME, PWD);
String sql ="SELECT * FROM policy WHERE name LIKE ? AND document LIKE ? AND organ LIKE ? ORDER BY id DESC " ;
pstmt=connection.prepareStatement(sql);
pstmt.setString(1, "%"+a+"%");
pstmt.setString(2, "%"+b+"%");
pstmt.setString(3, "%"+c+"%");
rs= pstmt.executeQuery();// 反回值，增删改了几条数据增删改用update
while(rs.next()) {
//政策名称
String name=rs.getString("name");
//发文机构
String organ=rs.getString("organ");
//颁布时间
String pubdata=rs.getString("pubdata");
//政策分类
String type=rs.getString("type");
%>
<tbody>
<tr align="center">
<td style="width: 320px" title="<%=name %>"><a href="neirong.jsp?name=<%=name %>"><%out.print(name);%></td>
<td style="width: 320px" title="<%=organ %>"><%out.print(organ);%></td>
<td style="width: 320px" title="<%=pubdata %>"><%out.print(pubdata);%></td>
<td style="width: 320px" title="<%=type %>"><%out.print(type);%></td>
</tr>
<%}
}
catch (ClassNotFoundException e) {
e.printStackTrace();
}
catch (SQLException e) {
e.printStackTrace();
}
catch (Exception e) {
e.printStackTrace();
}
finally {
// 关闭数据库
try{//先开的后关
if(rs!=null)rs.close();
if(pstmt!=null)pstmt.close();// 对象.方法
if(connection!=null)connection.close();
}
catch( SQLException e){
e.printStackTrace();
}
}
%>
</tbody>
</table>
</form>
</div>
<table width="100%" align="center">
<tr><td style="text-align:center;"><div id="barcon" name="barcon"></div></td></tr>
</table>
</body>
</html>
neirong.jsp
<%@ page language= "java" contentType= "text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta charset="UTF-8" >
<%@ page import="java.sql.*"%>
<title>内容展示页面</title>
</head>
<body>
<table border="1px" align="center">
<%
String name= request.getParameter("name");
%>
<%out.print(name); %></td></tr>
<%
String URL = "jdbc:mysql://localhost:3306/info ";
String USERNAME = "root";
String PWD = "PENGsuoqun123";
//jsp就是在html中嵌套的java代码，因此java代码可以写在jsp中（《%%》）
PreparedStatement pstmt = null;
ResultSet rs=null;
Connection connection = null;
try {
// a.导入驱动，加载具体驱动类
Class.forName("com.mysql.cj.jdbc.Driver");//注册// 加载具体的驱动类
// b.与数据库建立链接
connection = DriverManager.getConnection(URL, USERNAME, PWD);
String sql ="select * from policy where name like ? " ;
pstmt=connection.prepareStatement(sql);
pstmt.setString(1, "%"+name+"%");
rs= pstmt.executeQuery();// 反回值，增删改了几条数据增删改用update
while(rs.next()) {
//政策名称
String text=rs.getString("text");
out.print(text);}
}
catch (ClassNotFoundException e) {
e.printStackTrace();
}
catch (SQLException e) {
e.printStackTrace();
}
catch (Exception e) {
e.printStackTrace();
}
finally {
// 关闭数据库
try{//先开的后关
if(rs!=null)rs.close();
if(pstmt!=null)pstmt.close();// 对象.方法
if(connection!=null)connection.close();
}
catch( SQLException e){
e.printStackTrace();
}
}
%>
</table>
</body>
标签：完善,pageSize,政策,查询,科技,num,tempStr,var From： https://www.cnblogs.com/pengsuoqun123/p/17331479.html