JSP页面动态查询添加数据与分页数据显示
1
。
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/table.css" rel="stylesheet" type="text/css"> <link href="jquery/pagination/pagination.css" rel="stylesheet" type="text/css"/>
<link href="jquery/ui/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/pagination/jquery.pagination.js"></script>
<script type="text/javascript" src="jquery/ui/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="jquery/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/JsUtil.js"></script>
<script type="text/javascript">
$.fx.speeds._default = 1000; $(function(){
//日期显示
$(".time").datetimepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showSecond: true,
timeFormat: 'hh:mm:ss',
});
//分页加载数据
displayData(0);
//回车加载数据
$("#pageNo").keydown(function(event){//event 表示刚刚发生的事件
if(event.keyCode==13){
displayData(this.value-1);
}
});
//操作人员弹出窗口
$("#operatorInfo").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
//点击操作员得到记录
$("#selectOperatorImg").click(function() {
//发送ajax请求，查询所有用户，系统管理员除外
$.getJSON("${pageContext.request.contextPath}/user/getAll.action",{"_":new Date().getTime()},function(jsonObject){
//{"data":[{"operatorNanme":"","orgName":""},{},{}]}
$("#operatorInfo").empty();
var htmlString = "";
htmlString+='<table border="1" width="100%">';
htmlString+='<tr align="center">';
htmlString+='<td>选择</td>';
htmlString+='<td>操作员</td>';
htmlString+='<td>机构</td>';
htmlString+='</tr>'; $.each(jsonObject.data,function(i,n){
htmlString+='<tr align="center">';
htmlString+='<td> <input type="radio" onclick="selectOperator(\''+n.operatorName+'\')"></td>';
htmlString+='<td>'+n.operatorName+'</td>';
htmlString+='<td>'+n.orgName+'</td>';
htmlString+='</tr>';
});
htmlString+='</table>';
$("#operatorInfo").append(htmlString);
});
$( "#operatorInfo" ).dialog( "open" );
return false;
});
});
//单选
function selectOperator(operatorName){
//设置到查询文本框中
$("#operatorName").val(operatorName);
//关闭弹出框
$( "#operatorInfo" ).dialog( "close" );
} //分页查询的方法
function displayData(pageNo){
var pageSize = $("#pageSize").val();
$.ajax({
url:"${pageContext.request.contextPath}/operationLog/getByPage.action",
type:"get",
cache:false,//也可以解决浏览器缓存的问题，另一种方式是加时间戳
data:{
"pageNo":pageNo+1,
"pageSize":pageSize,
"operatorName":$("#operatorName").val(),
"operationType":$("#operationType").val(),
"startTime":$("#startTime").val(),
"endTime":$("#endTime").val()
},
beforeSend:function(){
$("#message").text("正在分页查询请稍后...");
return true;
},
success:function(jsonObject){
//清空tbody
$("#operationLogInfoTBody").empty();
//操作时间 操作员 IP地址 操作模块 操作节点 操作类型
//{"total":100,"dataList":[{"id":"","time":"","operatorName":"","ip":"","module":"","node":"","type":""},{},{}]}
//{"total":0}
if(jsonObject.total==0){
$("#message").text("没有符合条件的记录");
}else{
$("#message").text("查询结果如下");
//拼接字符串
var htmlString = "";
$.each(jsonObject.dataList,function(i,n){
htmlString+="<tr class='odd'>";
htmlString+="<td><span class='box_table_even'> <input type='checkbox' name='id' value='"+n.id+"' /> </span></td>";
htmlString+="<td>"+n.time+"</td>";
htmlString+="<td>"+n.operatorName+"</td>";
htmlString+="<td>"+n.ip+"</td>";
htmlString+="<td>"+n.module+"</td>";
htmlString+="<td>"+n.node+"</td>";
htmlString+="<td>"+n.type+"</td>";
htmlString+="</tr>";
}); //将上面拼接好的html字符串追加到tbody标签中
$("#operationLogInfoTBody").append(htmlString);
} //翻页显示
$("#pagination").pagination(jsonObject.total, {// 总记录条数
callback: displayData,//每次点击翻页按钮的时候，都会自动调用这个回调函数 名字随意取
items_per_page:pageSize, //每页显示多少条数据
current_page:pageNo,//当前页码
link_to:"javascript:void(0)",//只保留超链接的样式，点击超链接的时候执行js代码，但是不跳转到任何资源
num_display_entries:5,//默认显示几个页码
next_text:"下一页",
prev_text:"上一页",
prev_show_always:true,//没有上一页的时候是否还显示按钮
next_show_always:true,//没有上一页的时候是否还显示按钮
num_edge_entries:2,//页码多的时候省略
ellipse_text:"..."
}); //显示总记录条数
$("#total").text(jsonObject.total);
//显示总页数
var pageCount = jsonObject.total%pageSize==0?jsonObject.total/pageSize:parseInt(jsonObject.total/pageSize)+1;
$("#pageCount").text(pageCount);
}
});
}
</script>
</head> <body>
<div id="operatorInfo" title="选择操作员">
</div>
<table border="0" cellpadding="0" cellspacing="0" class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td width="25" height="26" align="right"><img
src="data:images/ico_location.gif" width="16" height="15" /></td>
<td><font style="font-size: 12px;"><strong>位置：</strong>首页>系统管理>日志管理>操作日志管理</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" class="table_padding">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td height="26" class="font_left"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
class="box_table" id="box_table">
<thead>
<tr>
<td width="105" class="box_table_even">操作员 ：</td>
<td width="658" class="box_table_odd">
<span class="in">
<input type="text" id="operatorName"/>
<img src="data:images/3_r11_c21.jpg" id="selectOperatorImg" alt="aa" width="16" height="16" class="refButtonClass" style="cursor: pointer;"/>
</span>
</td>
<td width="268" class="box_table_even">操作类型 ：</td>
<td width="212" class="box_table_odd">
<select id="operationType">
<option value="">--请选择--</option>
<option value="新增">新增</option>
<option value="删除">删除</option>
<option value="修改">修改</option>
</select>
</td>
<td width="105" class="box_table_odd"> </td>
</tr>
<tr>
<td class="box_table_even">日期 ：</td>
<td class="box_table_odd">
<input type="text" class="time" id="startTime"/>
<img src="data:images/kalendar1button.gif" width="25" height="21" align="absmiddle" />
<input class="time" type="text" id="endTime"/>
<img src="data:images/kalendar1button.gif" width="25" height="21" align="absmiddle" />
</td>
<td class="box_table_even"> </td>
<td class="box_table_odd"> </td>
<td class="box_table_odd">
<span class="font_middle">
<input type="button" value="查询" onclick="displayData(0)"/>
</span>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0"
class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td height="26" align="right">
<span class="font_right">
<span id="message" style="color: red;font-size: 12px"></span>
<input type="button" value="查看明细" onclick="window.location.href='operationLog/detail.action';" />
<%-- <input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportExcel.action';"/>--%>
<input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportCSV.action';"/>
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
id="box_num_table2" class="box_num_table">
<thead>
<tr>
<td> </td>
<td>操作时间</td>
<td>操作员</td>
<td>IP地址</td>
<td>操作模块</td>
<td>操作节点</td>
<td>操作类型</td>
</tr>
</thead>
<tbody id="operationLogInfoTBody">
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<%@ include file="/WEB-INF/jsp/common/pageFoot.jsp" %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.分页工具栏
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<table width="100%" height="30" border="0" cellpadding="0"
cellspacing="0" class="page_table">
<tr>
<td width="8%" class="font_left">
数据:<span id="total"></span> 条
</td> <td width="12" class="font_left">
第
</td>
<td width="375" class="font_left">
<input id="pageNo" type="text" size="2" maxlength="4"/>
/<span id="pageCount"></span>页
<input type="image" border="0" src="data:images/go.gif" onclick="displayData($('#pageNo').val()-1)" />
<select id="pageSize" onchange="displayData(0)">
<c:forTokens items="${initParam.pageSizeString }" delims="," var="pageSize">
<option value="${pageSize}">每页${pageSize}条</option>
</c:forTokens>
</select>
</td>
<td width="478" class="font_right">
<div id="pagination"></div>
<input type="image" class="font_right"
onclick="displayData(0)"
src="data:images/botton_page_refresh.png"
border="0" />
</td>
</tr>
</table>
3.
public PaginationVO<OperationLog> getByPage(Integer pageNo,
Integer pageSize, String operatorName, String operationType,
String startTime, String endTime) { StringBuilder hql = new StringBuilder("from OperationLog ol join fetch ol.operator where 1=1 ");
List<Object> paramList = new ArrayList<Object>();
if(StringUtil.isNotEmpty(operatorName)){
hql.append(" and ol.operator.name like ?");
paramList.add(operatorName+"%");
} if(StringUtil.isNotEmpty(operationType)){
hql.append(" and ol.type = ?");
paramList.add(operationType);
}
if (StringUtil.isNotEmpty(startTime)) {
hql.append(" and ol.time >= ?");
paramList.add(startTime);
}
if (StringUtil.isNotEmpty(endTime)) {
hql.append(" and ol.time <= ?");
paramList.add(endTime);
}
hql.append(" order by ol.time desc");
Query query = getSession().createQuery(hql.toString());
for (int i = 0; i < paramList.size(); i++) {
query.setParameter(i, paramList.get(i));
}
query.setFirstResult((pageNo-1)*pageSize);
query.setMaxResults(pageSize);
List<OperationLog> dataList = query.list();
//----------------------------------------------------------------
StringBuilder countHql = new StringBuilder("select count(*) from OperationLog ol where 1=1 ");
List<Object> countParamList = new ArrayList<Object>();
if(StringUtil.isNotEmpty(operatorName)){
countHql.append(" and ol.operator.name like ?");
countParamList.add(operatorName+"%");
} if(StringUtil.isNotEmpty(operationType)){
countHql.append(" and ol.type = ?");
countParamList.add(operationType);
}
if (StringUtil.isNotEmpty(startTime)) {
countHql.append(" and ol.time >= ?");
countParamList.add(startTime);
}
if (StringUtil.isNotEmpty(endTime)) {
countHql.append(" and ol.time <= ?");
countParamList.add(endTime);
} Query countQuery = getSession().createQuery(countHql.toString());
for (int i = 0; i < countParamList.size(); i++) {
countQuery.setParameter(i, countParamList.get(i));
}
Long total = (Long) countQuery.uniqueResult(); PaginationVO<OperationLog> paginationVO = new PaginationVO<OperationLog>();
paginationVO.setTotal(total);
paginationVO.setDataList(dataList);
return paginationVO;
}
JSP页面动态查询添加数据与分页数据显示的更多相关文章
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- jsp页面动态获取系统时间
最近在做练习时碰到了这样一个问题:"读者选择查询图书相应信息,跳转到书目的详细信息界面,当可借阅数量大于零,点击借阅按钮,提示用户借阅成功,并显示归还日期(三个月),否则提示用户该书可借阅数 ...
- 在jsp页面动态添加数据库中的内容
工具:myeclipse+oracle11g 1.首先新建一个jsp页面. 2.在src目录下新建实体类User.java 3.创建BaseDao用来链接数据库 4.在pl/sql中创建存储过程 5. ...
- jsp页面显示数据库的数据信息表
在日常jsp开发中:最基本的一个操作之一是把之前添加到数据库中的信息在jsp页面中显示出来,也就是增删改查中的查找的一部分: 下面是以上部分的开发步骤及分析. 1.在jsp页面: <thead& ...
- Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)
目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- JSP 页面显示sql中数据。el
存储数据库字段. package Bean; /** * Created by Administrator on 2017/5/24. */ public class info { private S ...
- 在jsp页面动态添加，删除文本框模块
jsp代码============ <table class="crud-content-info" > <tr > <td align=" ...
- 解决JSP页面获取的数据库数据乱码问题
将java项目部署到服务器,页面数据乱码: 解决:首先查看了数据库编码和jsp编码都是utf-8,说明jsp和数据库没问题,于是查看了tomcat设置的编码 没有设置编码,于是加了URIEncodin ...
随机推荐
- 从Oracle同步数据到SQLServer——大小写敏感设置
Oracle默认是大小写敏感,而SQLServer默认大小写不敏感, 尤其是涉及主键字段时,注意请提前设置SQLServer对应的数据库表为大小写敏感,不然会报主键冲突的错误. 设置表内大小写敏感 A ...
- C#控制台显示进度条
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Prog ...
- fabric.js 翻转，复制粘贴，隐藏， 删除，历史记录，撤销， 剪切， 图层，组合打散，锁定等功能
用vue写的 显示,隐藏 hide(){ this.canvas.getActiveObject().set('opacity', 0).setCoords(); this.canvas.reques ...
- 解决启动httpd报: apr_sockaddr_info_get() failed for错误
我测试库里 service httpd start 时报 下面错误 httpd: apr_sockaddr_info_get() failed for fengxin.wzjzt.centoshttp ...
- 转载：SQL Server中查询CPU占用高的SQL语句
SQL Server中查询CPU占用高的SQL语句 SQL Server 表变量的用法 究竟什么是敏捷测试--朱少民
- 定时器篇---java.util.TimerTask和quartz
最近项目中出现了定时执行任务的东西,研究了一下,觉得挺不错的,以后还用得到,就总结了下. 这里只介绍两种java.util.Timer 和 quartz java.util.Timer java自带的 ...
- Windows Server 2012安装.net framework3.5（转）
1.先下载WIN2012R2安装NET3.5的专用数据源 https://pan.baidu.com/s/1bqiUTyR 提取码h09k 并解压,比如解压到桌面,解压后的路径为C:\Users\Ad ...
- 网络教程(7）OSI模型的低层模型
OSI Model——Open System Interconnection Model 开放系统互联模型
- 为什么在JavaScript中0.1+0.2不等于0.3？
0.1+0.2不等于0.3?是不是有点颠覆你的认知,但是,在js中,是真实存在的! console.log(0.1+0.2); // 0.30000000000000004 其实这都是因为浮点数运算的 ...
- WEBGL学习【十四】利用HUD技术在网页上方显示三维物体
关键点: <!--实现原理:要保证这两个canvas相互重叠;z-index表示了两个画布的上下层关系--> <!--是WEBGL的三维图形Canvas(主要用于绘制三维场景)--& ...