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 ...
随机推荐
- jTemplates的教程，包括{#if}{#foreach}{#for}的简单使用
最近在做一些局部刷新的分页工作,一般不使用既成的插件的话,就是在脚本里面重新渲染一个局部的html,把需要局部分页的模块重写一遍,还需要在控制器里再定义一个方法返回所需的局部数据,这种做法相当冗余,所 ...
- 动画库animate.css的用法
简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...
- 第二课 TXT读取 - 导出 - 选择顶部/底部记录 - 描述性统计 - 分组/排序
第2课 创建数据 - 我们从创建自己的数据集开始分析.这可以防止阅读本教程的最终用户为得到下面的结果而不得不下载许多文件.我们将把这个数据集导出到一个文本文件中,这样您就可以获得从文本文件中一些拉取数 ...
- （转） 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 2nd
Java语言基础(常量的概述和使用) A:什么是常量 在程序执行的过程中其值不可以发生改变 B:Java中常量的分类 字面值常量 自定义常量(面向对象部分讲) C:字面值常量的分类 字符串常量 用双引 ...
- QT4.8界面设计（MSVC2010X）
1.C++ IDE设计 MFC这种半死不活的windows C++平台已经被抛弃,很无奈.转向Qt的C++还是不错的选择. QT的QML才是最新的亮点,可惜没有时间经历这些东西了. 2.程序代码 2. ...
- Spring boot application.properties 配置
原文链接: http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.ht ...
- Python——Day2（基础知识练习一）
1.执行Python脚本的两种方式1)调用解释器 Python +绝对路径+文件名称2)调用解释器 Python +相对路径+文件名称 2.简述位.字节的关系8位为1个字节 3.简述ASCII.uni ...
- mysql 与 memcache 字段名后面有空格时会产生什么问题（转）
同事下午遇到一问题,MySQL 和 Memcached 对于同一个key,不能对应起来.最终原因是:PHP将key写入MySQL数据库之前,没有经过trim()过滤首尾空格(关键是尾部空格),结果: ...
- [JoyOI] 1035 棋盘覆盖 （二分图匹配）
题目描述 给出一张nn(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少12的多米诺骨牌进行掩盖. 输入格式 第一行为n,m(表示有m个删除的格子) 第二行到m+1行为x,y,分 ...