js前台分页显示后端JAVA数据响应

来源:互联网 发布:鳄鱼肉 知乎 编辑:程序博客网 时间:2024/06/06 14:08
功能:js前台分页显示 + 后台数据响应(JAVA Servlet即可) 
框架:jquery1.8.7 
此文目的:给那些刚入行软件开发,喜欢这也看看,那也看看,这儿copy一下,那儿copy一下初级小菜鸟们做一个表帅; 
1 为程序者需认真踏实坐下来; 
2 程序需要有投入才有收获; 
3 有收获才有鼓舞,才有动力一步一步往下走! 

下面上代码,具体会有小注释 
1、web页面的逻辑处理(js代码写到页面里时,有个好处,调试时不会受js文件缓存的影响) 
复制代码代码如下:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<!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>订单结算</title> 
<script type="text/javascript" src="js/jquery-1.8.7.min.js"></script> 
<LINK href="images/style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div align="left" style="width: 83%"> 
<p style="color: blue"> 
采购单状态: 
<select id="orderstatus"> 
<option value="" SELECTED>-search all!-</option> 
<option value="未结">未结</option> 
<option value="部分">部分</option> 
<option value="已结">已结</option> 
</select> 
   
<input type="button" style="height: 25px;width:70px" value="查询" onClick="firstFindPage(1)" /> 
<br> 
  
</p> 
</div> 
<div> 
<table width="100%" cellpadding="0" cellspacing="0" border="1" style="padding:2 " bordercolorlight="#3B4D61" bordercolordark="#ffffff" id='contentList'> 
</table> 
</div> 
<br> 
<div> 
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:2 " id='pageList'> 
</table> 
</div> 
</body> 
<script type="text/javascript"> 
//填充页面信息 
function writePageList(curpage,wholePage){ 
var pageContent = ""; 
if(curpage != 1){ 
pageContent += "<a href='#' onclick='findPage(1)' style='text-decoration: none'><b style='font-size: 12'>第一页</b></a>    "; 
pageContent += "<a href='#' onclick='findPage("+(parseInt(curpage)-1)+")' style='text-decoration: none'><b style='font-size: 12'>上一页</b></a>    "; 

if(curpage != wholePage){ 
pageContent += "<a href='#' onclick='findPage("+(parseInt(curpage)+1)+")' style='text-decoration: none'><b style='font-size: 12'>下一页</b></a>    "; 
pageContent += "<a href='#' onclick='findPage("+(parseInt(wholePage))+")' style='text-decoration: none'><b style='font-size: 12'>最后一页</b></a>    "; 

if(1 == wholePage){ 
pageContent += "<a href='#' onclick='findPage("+(parseInt(wholePage))+")' style='text-decoration: none'><b style='font-size: 12'>当前只有一页</b></a>    "; 

pageContent += "页数:<label id='curpage' style='color: red; font-size: 13'>"+curpage+"</label>/<label id='wholepages' style='color: red; font-size: 13'>"+wholePage+"</label>    "; 
pageContent += "        <input id='ppage' type='text' size='5'/><input type='button' style='height: 25px;width:55px' value='>>跳转' onclick='gotoPage()'/>"; 
// alert(pageContent); 
$('#pageList').empty(); 
$('#pageList').append("<tr><td>"+ 
pageContent 
+"</td></tr>"); 

//悠订单状态 
function changeStatus(orid){ 
var status = $('#status'+orid).val(); 
if(status==null || status==undefined){ 
alert("状态信息不能为空!"); 
return; 

$.post("DetailChange", { 
etype : 11, 
orid : orid, 
status : status 
}, function(data) { 
if(parseInt(data) > 0) 
alert("状态悠成功"); 
else 
alert("修改失败"); 
}); 

//用于查订单详情 
function findOrderDetail(orid){ 
var urls = "FindOrderDetail.jsp?orid="+orid; 
window.open(urls,'newwindow','height=400,width=600,top=100,left=200,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no, status=no'); 

//填充表格数据 
function writeContent(data){ 
// alert(data); 
var content = data.Orders; 
$('#contentList').empty(); 
$('#contentList').append("<tr>"+ 
"<td><b style='font-size: 16'>采购编号</b></td>"+ 
"<td><b style='font-size: 16'>经手人</b></td>"+ 
"<td><b style='font-size: 16'>订单日期</b></td>"+ 
"<td><b style='font-size: 16'>备注</b></td>"+ 
"<td><b style='font-size: 16'>状态</b></td>"+ 
"<td><b style='font-size: 16'>操作1</b></td>"+ 
"<td><b style='font-size: 16'>操作2</b></td>"+ 
"</tr>"); 
$.each(content,function(idx, item) { 
var tdc = "<tr>"+ 
"<td>"+String(item.orid)+"</td>"+ 
"<td>"+String(item.wname)+"</td>"+ 
"<td>"+String(item.date)+"</td>"+ 
"<td>"+String(item.remark)+"</td>"+ 
"<td><select id='status"+String(item.orid)+"' style='height: 25px;width:80px'>"+ 
"<option value='"+String(item.orderstatus)+"' SELECTED>未结</option>"+ 
"<option value='未结'>未结</option>"+ 
"<option value='部分'>部分</option>"+ 
"<option value='已结'>已结</option>"+ 
"</select></td>"+ 
"<td><input type='button' value='修改状态' style='height: 25px;width:80px' onclick='changeStatus("+String(item.orid)+")'/></td>"+ 
"<td><input type='button' value='查看详情' style='height: 25px;width:80px' onclick='findOrderDetail("+String(item.orid)+")'/></td>"+ 
"</tr>"; 
// alert(tdc); 
$('#contentList').append(tdc); 
}); 

//用于页页跳转 
function findPage(pageId){ 
var curstatus = $('#orderstatus').val(); 
$.post("AllCheckAction", { 
executetype : 5, 
page : pageId, 
orderstatus : curstatus, 
pagerows :1 
}, function(data) { 
var contents = data.ContentBody; 
$.each(contents,function(id, ite) { 
var curpage = ite.page; 
var wholePages = ite.wholepage; 
con = ite.searchtext; 
$.post("AllCheckAction", { 
executetype : 6, 
scondition : con 
},function(data2){ 
writeContent(data2); 
},"json"); 
writePageList(curpage,wholePages); 
}); 
}, "json"); 


//查询按钮调用 
function firstFindPage(pageId){ 
findPage(pageId); 

//用于页面跳转响应逻辑处理,即直接由输入页进地跳转 
function gotoPage(){ 
var ppage = $('#ppage').val(); 
var maxpage = $('#wholepages').innerHTML; 
//numint()函数判断是否为数字 
if(ppage == null || ppage == undefined || (!numint(ppage))){ 
alert("无效的页码!"); 
return; 

if(parseInt(ppage)>parseInt(maxpage) || parseInt(ppage)<1){ 
alert("请求页不存在页码!"); 
return; 

findPage(ppage); 
}; 
//判断是否为整数 
function numint(value) { 
var p = "0123456789"; 
for ( var i = 0; i < value.length; i++) { 
var num = p.indexOf(value.charAt(i)); 
if (num < 0) { 
return false; 


return true; 

</script> 
</html> 

2 后台页面响应的JAVA代码(即一个标准的Servlet) 
复制代码代码如下:

package com.ljb.ttt.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import com.ljb.ttt.impl.BasicDao; 
public class AllCheckAction extends HttpServlet { 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
doPost(req, resp); 

protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
try { 
int executetype = -1; 
String types = req.getParameter("executetype"); 
if(types == null) 
return; 
else 
executetype = Integer.valueOf(types); 
PrintWriter out = resp.getWriter(); 
BasicDao bd = new BasicDao(); 
switch(executetype){ 
case 5: 
String orderStatus = req.getParameter("orderstatus"); 
Integer page = Integer.valueOf(req.getParameter("page")); 
Integer pageSize = Integer.valueOf(req.getParameter("pagerows")); 
String condition = ""; 
String content = ""; 
Integer wholePages = 0; 
if(orderStatus != null && (!orderStatus.equals(""))){ 
condition = String.format(" and orderstatus='%s'",orderStatus); 

int wholeSize = bd.count("`order` t1,worker t2", pageSize," and t1.wid=t2.wid" + 
condition+" and t1.orid in (select orid from orderdetail)"); 
if(0 == wholeSize%pageSize) 
wholePages = wholeSize/pageSize; 
else 
wholePages = wholeSize/pageSize + 1; 
//对于不正确页的判断处理 
if (page >= wholePages) 
page = wholePages; 
if(page<=1) 
page = 1; 
condition += String.format(" limit %d,%d",pageSize*(page-1),pageSize); 
content = String.format("{\"ContentBody\":[{\"page\":\"%d\",\"wholepage\":\"%d\",\"searchtext\":\""+condition+"\"}]}", 
page,wholePages); 
out.print(content); 
System.out.println(content); 
break; 
//for OrderClose.jsp in get order data 
case 6: 
String sconditon = (String)req.getParameter("scondition"); 
if(sconditon != null){ 
if(sconditon.equals("")) 
out.print(getJsonData(6, "", "Orders",bd)); 
else 
out.print(getJsonData(6, sconditon, "Orders",bd)); 

break; 
default: 
break; 

out.flush(); 
out.close(); 
} catch (IOException e) { 
e.printStackTrace(); 


//generate data from a search sql 
private String getJsonData(int type,String searchContent,String jsonName,BasicDao bd){ 
String sql = ""; 
switch(type){ 
//获取 
case 6: 
sql = String.format("select t1.orid,t2.wname,t1.date,t1.remark,t1.orderstatus from `order` t1,worker t2 where t1.wid=t2.wid" + 
" and t1.orid in (select orid from orderdetail)%s",searchContent); 
break; 
default: 
break; 

String temp = bd.getJsonStr(sql,jsonName); 
// System.out.println(temp); 
return temp; 



3 让Servlet在web.xml中的配置参考 
复制代码代码如下:

<!-- 各种盘点 --> 
<servlet> 
<servlet-name>CheckSaveServlet</servlet-name> 
<servlet-class>com.ljb.ttt.servlet.CheckSaveServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>CheckSaveServlet</servlet-name> 
<url-pattern>/CheckSaveServlet</url-pattern> 
</servlet-mapping> 

4 付上本次后台调用的一个关键方法,将查询转化为JSON数据格式的方法 
复制代码代码如下:

//return DataType {"tittle":[{"colName":"val",..},{},{}]} 
public String getJsonStr(String sql,String jsonName){ 
String jsonStr = ""; 
String tjson = ""; 
Connection con = null; 
ResultSet rs = null; 
PreparedStatement pst = null; 
con = sh.getConnection(); 
HashMap<String,Object> hm = sh.select(con, pst, rs, sql, null); 
rs = (ResultSet)hm.get("ResultSet"); 
int colNum; 
try { 
colNum = rs.getMetaData().getColumnCount(); 
String colName[] = new String[colNum]; 
for(int i= 0;i<colNum;i++) 
colName[i] = rs.getMetaData().getColumnName(i+1); 
while(rs.next()){ 
jsonStr += "{"; 
String temp = ""; 
for(int i= 0;i<colNum;i++){ 
temp += "\""; 
temp += colName[i]; 
temp += "\":\""; 
temp += rs.getString(i+1); 
temp += "\","; 

jsonStr += temp.substring(0, temp.length()-1); 
jsonStr += "},"; 

tjson += "{\""+jsonName + "\":["; 
if(jsonStr!="") 
tjson += jsonStr.substring(0, jsonStr.length()-1); 
tjson += "]}"; 
} catch (SQLException e) { 
// TODO Auto-generated catch block 
e.printStackTrace(); 

pst = (PreparedStatement)hm.get("PreparedStatement"); 
sh.closeAll(rs, pst, con); 
return tjson; 


: 
1 里面没有见到过的方法调用,不用担心,搞过java连接数据库的都没有问题; 
2 这个里面有一个比较不足的地方,将页数信息与页面数据分两次AJAX请求得到,这个是非常影响性能的,如果能做到将一次ajax请求,一次解析获取全部需要数据,那就比较出彩了(嵌套JSON就是不错的选择)。 
3 由于并非专职搞web开发,发现这个CSS样式搭配起来还是非常费劲的。
0 0