html代码
<table class="table">
<thead>
<tr style="text-align: center;">
<th >员工编号</th>
<th>姓名</th>
<th>性别</th>
<th>身份证号</th>
<th>政治面貌</th>
<th>职位</th>
<th>员工状态</th>
<th>学历</th>
<th>专业</th>
<th style="color: #0c87eb;">修改</th>
<th style="color: #0c87eb;">离职</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="page" style="margin-right: auto;margin-left: auto;width: 20%;">
<div id="previous" class="flex-1"><button type="button" "previousPage();">上一页</button></div>
<div class="flex-1">第<span id="cur">1</span>页</div>
<div class="flex-1">共<span id="item">1</span>页</div>
<div id="next" class="flex-1"><button type="button" "nextPage();">下一页</button></div>
</div>
</body>
servlet写出数据
TIinfoEntity info = new TIinfoEntity();//创建实体类（自定义实体类）
//将查询条件存入实体类
info.set_Ename(req.getParameter("name"));
info.set_politicStatus(req.getParameter("politicStatus"));
info.set_job(req.getParameter("job"));
info.set_major(req.getParameter("major"));
info.set_education(req.getParameter("education"));
IdbProcessor pr = new dbProcessor();//调用数据处理接口（自定义查询数据库方法类）
List<TIinfoEntity> list =pr.InfoSelect(info);//调用查询方法，并将返回值赋值给list
Gson gson = new Gson();//使用gson.jar包的工具类
String json = gson.toJson(list);/将list转为json对象字符串，例：'[ { key:value,key:value } , {key:value,key:value } ]'///
输出方法一：
sverlet: resp.getWriter().write(json); //输出json字符串，我是用的ajax提交并接收
**js**:
function selectInfo() {
$.ajax({
url:"test",
data:$("#Sinfo").serialize(),
type:"post",
success : function(Result)这里的Result就是sverlet输出的json字符串
{
PageLoad(Result);
},
error : function()
{
alert("错误消息提示");
},
async:false
});
}
输出方法二：
将json字符串存入session,使用jsp赋值给
servlet:
HttpSession hs = req.getSession();//创建session对象
hs.setAttribute(“list”,list);//写入键值对
jsp:
js代码
----------初始化页面---------------
function PageLoad(list){ 使用方法一可直接使用传入的list
使用方法二需要执行以下操作，并删除括号中的list：
var list = list();///执行list方法
-----------------------------------
var numPage=1; //初始化总页数
var currentPage=1;//初始化当前页数
var currentvalue=0;//初始化初始循环变量
var endvalue;//循环结束变量
var skipnum=5;//每页显示条数
var tbody=document.getElementById("tbody"); //显示内容元素框
var previous=document.getElementById("previous");//上一页按钮框
var next = document.getElementById("next"); //下一页按钮框
var spancur = document.getElementById("cur"); //当前页
var spanitem = document.getElementById("item");//总页数
sessionStorage.setItem("list",list);//存储session对象
list=eval(list);//解析json字符串
if(list.length<=skipnum){ //查询条数小于或等于显示条数执行
previous.innerHTML="";
next.innerHTML="";
numPage=1;
currentPage=1;
var str="";
for(var i=0;i<list.length;i++){//显示数据拼接
str=str+"<tr><td>"+list[i]._E_id+"</td><td>"+list[i]._Ename+"</td><td>"+list[i]._sex+"</td><td>"+list[i]._identity+"</td><td>"+list[i]._politicStatus+"</td><td>"+list[i]._job+"</td><td>"+list[i]._workingState+"</td><td>"+list[i]._education+"</td><td>"+list[i]._major+"</td><td>\n" +
" <button \"upDate(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">修改</button>\n" +
" </td>\n" +
" <td><button \"departure(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">离职</button></td>\n</tr>";
}
} else{ 查询条数大于显示条数
next.innerHTML="<button type=\"button\" \"nextPage();\">下一页</button>";
previous.innerHTML="";
总页数/
if(list.length%skipnum==0){
numPage=list.length/skipnum;
}
if(list.length%skipnum!=0){
numPage=parseInt(list.length/skipnum)+1;
}
endvalue=currentPage*skipnum;循环结束值=当前页数*每页显示条数
var str="";
for(var i=currentvalue;i<endvalue;i++){
str=str+"<tr><td>"+list[i]._E_id+"</td><td>"+list[i]._Ename+"</td><td>"+list[i]._sex+"</td><td>"+list[i]._identity+"</td><td>"+list[i]._politicStatus+"</td><td>"+list[i]._job+"</td><td>"+list[i]._workingState+"</td><td>"+list[i]._education+"</td><td>"+list[i]._major+"</td><td>\n" +
" <button \"upDate(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">修改</button>\n" +
" </td>\n" +
" <td><button \"departure(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">离职</button></td>\n</tr>";
}
}
tbody.innerHTML=str; 显示数据
spancur.innerHTML=currentPage;显示当前页数
spanitem.innerHTML=numPage;显示总页数
var jsonV={
"numPage":numPage,总页数
"currentPage":currentPage,当前页数
"currentvalue":currentvalue,当前循环初始值
"endvalue":endvalue,循环结束值
"skipnum":skipnum 每页显示条数
}
jsonV=JSON.stringify(jsonV);//将json对象转换为json字符串
sessionStorage.setItem("jsonV",jsonV);存入session对象
}
----------------上一页----------------------
function previousPage(){
var jsonV=sessionStorage.getItem(“jsonV”);
jsonV=JSON.parse(jsonV);
var list=sessionStorage.getItem(“list”);
list=eval(list);
var numPage=jsonV.numPage;
var currentPage=jsonV.currentPage;
var currentvalue=jsonV.currentvalue;
var endvalue=jsonV.endvalue;
var skipnum=jsonV.skipnum;
var tbody=document.getElementById(“tbody”);
var previous=document.getElementById(“previous”);
var next = document.getElementById(“next”);
var spancur = document.getElementById(“cur”);
var spanitem = document.getElementById(“item”);
next.innerHTML="<button type=“button” “nextPage();”>下一页";
currentPage=currentPage-1;
currentvalue=currentvalue-skipnum;
endvalue=endvalue-skipnum;
if(currentvalue==0){ 当期页为第一页时隐藏上一页按钮，可用button.hide()
previous.innerHTML="";
}
var str="";
for(var i=currentvalue;i<endvalue;i++){
str=str+"<tr><td>"+list[i]._E_id+"</td><td>"+list[i]._Ename+"</td><td>"+list[i]._sex+"</td><td>"+list[i]._identity+"</td><td>"+list[i]._politicStatus+"</td><td>"+list[i]._job+"</td><td>"+list[i]._workingState+"</td><td>"+list[i]._education+"</td><td>"+list[i]._major+"</td><td>\n" +
" <button \"upDate(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">修改</button>\n" +
" </td>\n" +
" <td><button \"departure(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">离职</button></td>\n</tr>";
}
tbody.innerHTML=str;
spancur.innerHTML=currentPage;
spanitem.innerHTML=numPage;
var jsonV={
"numPage":numPage,
"currentPage":currentPage,
"currentvalue":currentvalue,
"endvalue":endvalue,
"skipnum":skipnum
}
jsonV=JSON.stringify(jsonV);
sessionStorage.setItem("jsonV",jsonV);
}
---------------------下一页-------------------------
function nextPage(){
var jsonV=sessionStorage.getItem(“jsonV”);
jsonV=JSON.parse(jsonV);
var list=sessionStorage.getItem(“list”);
list=eval(list);
var numPage=jsonV.numPage;
var currentPage=jsonV.currentPage;
var currentvalue=jsonV.currentvalue;
var endvalue=jsonV.endvalue;
var skipnum=jsonV.skipnum;
var tbody=document.getElementById(“tbody”);
var previous=document.getElementById(“previous”);
var next = document.getElementById(“next”);
var spancur = document.getElementById(“cur”);
var spanitem = document.getElementById(“item”);
previous.innerHTML=‘上一页’;
currentPage=currentPage+1;
currentvalue=currentvalue+skipnum;
endvalue=endvalue+skipnum;
if(currentPage==numPage){如果当前页是最后一页，隐藏下一页按钮
next.innerHTML="";
}
var str="";
for(var i=currentvalue;i<endvalue;i++){
str=str+"<tr><td>"+list[i]._E_id+"</td><td>"+list[i]._Ename+"</td><td>"+list[i]._sex+"</td><td>"+list[i]._identity+"</td><td>"+list[i]._politicStatus+"</td><td>"+list[i]._job+"</td><td>"+list[i]._workingState+"</td><td>"+list[i]._education+"</td><td>"+list[i]._major+"</td><td>\n" +
" <button \"upDate(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">修改</button>\n" +
" </td>\n" +
" <td><button \"departure(this);\" class=\"btn btn-primary\" style=\"width: 90px; height: 30px\">离职</button></td>\n</tr>";
if(i==list.length-1){如果这是最后一条结束循环
break;
}
}
tbody.innerHTML=str;
spancur.innerHTML=currentPage;
spanitem.innerHTML=numPage;
var jsonV={
"numPage":numPage,
"currentPage":currentPage,
"currentvalue":currentvalue,
"endvalue":endvalue,
"skipnum":skipnum
}
jsonV=JSON.stringify(jsonV);
sessionStorage.setItem("jsonV",jsonV);
}
如有疑问可相互交流，大佬勿喷。
2169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
