Spring
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 导入jstl核心标签库, 需要导入jar包.jstl.jar和standard.jar --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 页面加载后立刻运行的代码. 发起一个异步请求.查询用户数据.
var url = "a";
$.ajax({
'url':'${pageContext.request.contextPath}/user/getUserByPage2.action', //
'type':'post',
'data':'', // 请求参数
'beforeSend':function(){
// 提交请求前的校验, 函数返回true,提交请求,函数没有返回提交请求. 函数返回false,终止提交.
return true;
},
'success':function(data){
// 当前函数是回调函数. 当响应返回后,执行的代码. data参数是响应流中输出是数据.
// var obj = eval("("+data+")");
// alert(obj.total);
var tr = "";
/*
* $.each() - 循环迭代函数.
* 1. $.each(collection, function(i, n){});
* 循环集合collection[数组,对象等], 每次循环过程中调用回调函数.
* 函数的参数 i - 索引 n - 本次循环的变量
* 2. collection.each(function(i, n){}); 循环collection集合[数组,map,对象]
*/
$.each(data.rows, function(i, n){
tr += '<tr> ';
tr += ' <th style="padding:5px"> ';
tr += n.name;
tr += ' </th> ';
tr += ' <th style="padding:5px"> ';
tr += n.loginName;
tr += ' </th> ';
tr += ' <th style="padding:5px"> ';
tr += n.remark;
tr += ' </th> ';
tr += ' <th style="padding:5px"> ';
tr += n.group.name;
tr += ' </th> ';
tr += '</tr> ';
});
var footer = "";
footer += '<tr> ';
footer += ' <td style="text-align:right; padding-right:10px; padding:5px" colspan="4"> ';
if(data.currentPage != 1){
footer += ' <input type="button" value="首页" onclick="firstPage();"/> ';
footer += ' <input type="button" value="上一页" onclick="prePage();"/> ';
}
if(data.currentPage != data.totalPages){
footer += ' <input type="button" value="下一页" onclick="nextPage();"/> ';
footer += ' <input type="button" value="尾页" onclick="lastPage();"/> ';
}
footer += ' <span>跳转到</span> ';
footer += ' <input type="text" name="page" size="3" id="toPageNo"/> / '+data.totalPages;
footer += ' <input type="button" value="跳转" onclick="toPageNo();"/> ';
footer += ' <input type="button" value="导出用户数据" onclick="downloadUsers();"/> ';
footer += ' </td> ';
footer += '</tr> ';
var tBody = $("#userView"); // id选择器.根据id属性查询标签.
tBody.empty(); // 清空当前标签内所有内容.
tBody.append(tr); // 在当前标签内部追加新的元素. tr
tBody.append(footer); // 在当前标签内部追加新的元素. footer
}
});
// $.get(); $.post();
});
function prePage(){
var prePageNo = ${items.currentPage} - 1;
toPage(prePageNo);
}
function nextPage(){
var nextPageNo = ${items.currentPage} + 1;
toPage(nextPageNo);
}
function firstPage(){
toPage(1);
}
function lastPage(){
var lastPageNo = '${items.totalPages}';
toPage(lastPageNo);
}
function toPage(page){
window.location.href='${pageContext.request.contextPath}/user/getUsersByPage.action?page='+page+'&rows=3';
}
function toPageNo(){
var toPageNo = document.getElementById("toPageNo").value;
var totalPages = '${items.totalPages}';
if(toPageNo > 0 && toPageNo <= totalPages){
toPage(toPageNo);
}else{
toPage(1);
}
}
function downloadUsers(){
var currentPage = '${items.currentPage}';
window.location.href="${pageContext.request.contextPath}/user/downloadUsers.action?page="+currentPage+"&rows=3";
}
</script>
</head>
<body>
<%-- 数据显示 --%>
<div style="text-align:center; padding: 15px">
<table style="text-align:center" cellpadding="0" cellspacing="0" border="0">
<caption>用户信息</caption>
<thead>
<tr>
<th style="padding:5px">
姓名
</th>
<th style="padding:5px">
登录名
</th>
<th style="padding:5px">
描述
</th>
<th style="padding:5px">
分组名称
</th>
</tr>
</thead>
<tbody id="userView">
</tbody>
</table>
</div>
</body>
</html>
浙公网安备 33010602011771号