html 页面测试
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="../js/dom03.js" ></script>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
</tr>
</table>
<label >一定有<span id="all" style="color: chartreuse;">y</span>页</label>
<label >xian <span id="now"style="color: chartreuse;">ds</span>页</label>
<input type="button" id="btn" value="next" />
<input type="button" id="btn1" value="pre" />
</body>
</html>
dom03.js
$(function(){
var user={"id":1001,"name":"zh","pass":"pass1"}
var users=[{"id":1001,"name":"zh1","pass":"pass12"},
{"id":1002,"name":"zh2","pass":"pass31"},
{"id":1003,"name":"zh3","pass":"pass41"},
{"id":1004,"name":"zh4","pass":"pass51"},
{"id":1005,"name":"zh1","pass":"pass12"},
{"id":1006,"name":"zh2","pass":"pass31"},
{"id":1007,"name":"zh3","pass":"pass41"},
{"id":1008,"name":"zh4","pass":"pass51"},
{"id":1009,"name":"zh1","pass":"pass12"},
{"id":10010,"name":"zh2","pass":"pass31"},
{"id":10011,"name":"zh3","pass":"pass41"},
{"id":10012,"name":"zh4","pass":"pass51"},
{"id":10013,"name":"zh1","pass":"pass12"},
{"id":10014,"name":"zh2","pass":"pass31"},
{"id":10015,"name":"zh3","pass":"pass41"},
{"id":10016,"name":"zh4","pass":"pass51"}]
$.each(users, function(index,obj) {
var nun=$("#all").text(Math.ceil(index/4));
var s=parseInt(nun);
var nun1=$("#all").text();
alert(s+"**********");;
var s=parseInt(nun1);
alert(s+"**********"+nun1);
var num=4;
var x=1;
$("#now").text(x);
if(index<4) {
var str="<tr>"+"<td>"+obj.id+"</td>"+
"<td>"+obj.name+"</td>"+"<td>"+obj.pass+"</td>"+"</tr>";
$("tbody").append(str);
}
});
$("#btn").click(function(){
$("tbody").empty();
index=4;
var num1=$("#now").text();
var num2=parseInt(num1)+1;
num2=num2*4;
var i=num1*4;
$("#all").text(Math.ceil(users.length/4));
if(num1<(users.length/4)){
$("#now").text(parseInt(num1)+1);
for(i;i<num2;i++){
var str="<tr>"+"<td>"+users[i].id+"</td>"+
"<td>"+users[i].name+"</td>"+"<td>"+users[i].pass+"</td>"+"</tr>";
$("tbody").append(str);
}
}else{
num1=3;
$("#now").text(parseInt(num1)+1);
for(var i=4*num1;i<users.length;i++){
var str="<tr>"+"<td>"+users[i].id+"</td>"+
"<td>"+users[i].name+"</td>"+"<td>"+users[i].pass+"</td>"+"</tr>";
$("tbody").append(str);
}
}
});
$("#btn1").click(function(){
$("tbody").empty();
index=4;
var num1=$("#now").text();
var num2=parseInt(num1)+1;
num2=num2*4-4;
var i=num1*4-4;
$("#all").text(Math.ceil(users.length/4));
if(num1>1){
$("#now").text(parseInt(num1)-1);
for(i;i<num2;i++){
var str="<tr>"+"<td>"+users[i].id+"</td>"+
"<td>"+users[i].name+"</td>"+"<td>"+users[i].pass+"</td>"+"</tr>";
$("tbody").append(str);
}
}else{
num1=1;
$("#now").text(num1);
for(var i=0;i<4;i++){
str="<tr>"+"<td>"+users[i].id+"</td>"+
"<td>"+users[i].name+"</td>"+"<td>"+users[i].pass+"</td>"+"</tr>";
$("tbody").append(str);
}
}
});
});
jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
$(function(){
//导航切换
$(".imglist li").click(function(){
$(".imglist li.selected").removeClass("selected")
$(this).addClass("selected");
})
})
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".click").click(function(){
$(".tip").fadeIn(200);
});
$(".tiptop a").click(function(){
$(".tip").fadeOut(200);
});
$(".sure").click(function(){
$(".tip").fadeOut(100);
});
$(".cancel").click(function(){
$(".tip").fadeOut(100);
});
});
</script>
<script type="text/javascript">
function load(){
$.post("SystemLogServlert",function(data){
//当前页面
var num1=1;
var data = eval('('+data+')');
//记录数
var alllength=$("#blue1").text(data.length);
//页面总数
var pageall=$("#blue2").text(Math.ceil(data.length/10));
var pagecount=$("#blue2").text();
var cout=parseInt(pagecount);
//当前页面
var pagenow=$("#blue3").text(num1);
$.each(data, function(index,obj) {
if(index<10) {
var str = "<tr>"+"<td >"+obj.syslogId+"</td>"+
"<td>"+obj.syslogName+"</td>"+
"<td>"+obj.syslogUrl+"</td>"+
"<td >"+obj.staffname+"</td>"
+"<td >"+new Date(obj.syslogDate)+"</td>"+"</tr>";
$("tbody").append(str);
}
});
$("#next").click(function(){
$("tbody").empty();
pagenow=$("#blue3").text();
var num1=parseInt(pagenow);
var i=num1*10;
var num2=i+10;
if(num1 >= cout){
i=cout*10-10;
for(i;i<data.length;i++){
$("#blue3").text(cout);
var html1 = "<tr>"+"<td >"+data[i].syslogId+"</td>"+
"<td>"+data[i].syslogName+"</td>"+
"<td>"+data[i].syslogUrl+"</td>"+
"<td >"+data[i].staffname+"</td>"
+"<td >"+new Date(data[i].syslogDate)+"</td>"+"</tr>";
$("tbody").append(html1);
}
}else{
for(i;i<num2;i++){
$("#blue3").text(num1+1);
var html1 = "<tr>"+"<td >"+data[i].syslogId+"</td>"+
"<td>"+data[i].syslogName+"</td>"+
"<td>"+data[i].syslogUrl+"</td>"+
"<td >"+data[i].staffname+"</td>"
+"<td >"+new Date(data[i].syslogDate)+"</td>"+"</tr>";
$("tbody").append(html1);
}
}
});
$("#pre").click(function(){
$("tbody").empty();
pagenow=$("#blue3").text();
var num1=parseInt(pagenow);
var i=num1*10;
var num2=i+10;
if(num1 <= 1){
num1=1;
i=0;
for(i;i<10;i++){
$("#blue3").text(num1);
var html1 = "<tr>"+"<td >"+data[i].syslogId+"</td>"+
"<td>"+data[i].syslogName+"</td>"+
"<td>"+data[i].syslogUrl+"</td>"+
"<td >"+data[i].staffname+"</td>"
+"<td >"+new Date(data[i].syslogDate)+"</td>"+"</tr>";
$("tbody").append(html1);
}
}else{
for(i;i<num2;i++){
$("#blue3").text(num1-1);
var html1 = "<tr>"+"<td >"+data[i].syslogId+"</td>"+
"<td>"+data[i].syslogName+"</td>"+
"<td>"+data[i].syslogUrl+"</td>"+
"<td >"+data[i].staffname+"</td>"
+"<td >"+new Date(data[i].syslogDate)+"</td>"+"</tr>";
$("tbody").append(html1);
}
}
});
});
}
</script>
<style>
table{
border: 1px;
}
table tr{
height:60px;
}
.imgtable thead{
background: #fff;
}
.imgtable tr{
background: #fff;
}
.imgtable > thead>tr> th{border:solid 1px #b6cad2;
background: #fff !important;
}
td,th{
border:solid 1px #b6cad2
}
</style>
</head>
<body οnlοad="load()">
<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a href="#">首页</a></li>
<li><a href="#">员工档案</a></li>
</ul>
</div>
<div class="rightinfo">
<div class="tools">
<ul class="toolbar1">
<li><span><img src="images/t05.png" /> </span>设置</li>
</ul>
</div>
<div class="formtitle">
<span>员工合同管理</span>
</div>
<table class="imgtable" border="1">
<thead>
<tr>
<th>编号</th>
<th>各种操作</th>
<th>路径</th>
<th>服务者</th>
<th>时间</th>
</tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
<div class="pagin">
<div class="message">
共<i class="blue" id="blue1">1256</i>条记录，共有 <i class="blue" id="blue2">2 </i>页
当前<i class="blue" id="blue3">2 </i>页
</div>
<ul class="paginList">
<input type="button" id="pre" value="上一页" />
<input type="button" id="next" value="下一页" />
</ul>
</div>
<div class="tip">
<div class="tiptop">
<span>提示信息</span><a></a>
</div>
<div class="tipinfo">
<span><img src="images/ticon.png" /> </span>
<div class="tipright">
<p>是否确认对信息的修改 ？</p>
<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
</div>
</div>
<div class="tipbtn">
<input name="" type="button" class="sure" value="确定" /> <input
name="" type="button" class="cancel" value="取消" />
</div>
</div>
</div>
<div class="tip">
<div class="tiptop">
<span>提示信息</span><a></a>
</div>
<div class="tipinfo">
<span><img src="images/ticon.png" /> </span>
<div class="tipright">
<p>是否确认对信息的修改 ？</p>
<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
</div>
</div>
<div class="tipbtn">
<input name="" type="button" class="sure" value="确定" /> <input
name="" type="button" class="cancel" value="取消" />
</div>
</div>
<script type="text/javascript">
$('.imgtable tbody tr:odd').addClass('odd');
</script>
</body>
</html>
