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 ...
随机推荐
- maven nexus memory optimization
#链接地址:https://help.sonatype.com/repomanager3/system-requirements#filehandles While starting Nexus I ...
- 使用新的CSS类型对象模型
el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding') ...
- FBX骨骼坐标系与模型坐标系的关系
采用assimp加载FBX文件.首先记录下ubuntu下assimp的编译安装. cd assimp_unzip_dir mkdir build cd build && cmake . ...
- 三维点集拟合：平面拟合、RANSAC、ICP算法
ACM算法分类:http://www.kuqin.com/algorithm/20080229/4071.html 一: 拟合一个平面:使用SVD分解,代码里面去找吧 空间平面方程的一般表达式为: A ...
- 文件IO详解(四)---标准输入、标准输出和标准错误
每个进程都会默认打开3个文件描述符,即0.1.2.其中0代表标准输入流.1代表标准输出流.2代表标准错误流.通常标准输入流对应着键盘的设备文件.标准输出流和错误流对应着显示器的设备文件.在编程中通常使 ...
- Fear No More歌词
"Fear No More" Every anxious thought that steals my breath It's a heavy weight upon my ...
- apiCloud组件：swiper
一.apicloud中基于swiper封装了一个模块供调用.就是swiper.js 页面引入js就行 <script type="text/javascript" src=& ...
- Android对手尽皆铩羽，鸿蒙如何绝地求生？
Android对手尽皆铩羽,鸿蒙如何绝地求生? 作为华为绝地反击备胎计划中的重要组成部分,鸿蒙被国人寄予了厚望.但是,除了热情我们更应该理性关注,鸿蒙对决Android未来有几成胜算?还有哪些问题需要 ...
- JS 蓝球弹起的高度 100 米 第几次高度小于1米
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- distpicker 省市县级联
一.前言:想着每次写项目都要遇到省市县级联,就想找一个比较简单好用的插件来...感觉挺不错~~~ 二.例子: html : 效果: 还有很多种用法,我这里只放一种,插件文件里index.html有介绍 ...