js前台分页显示后端JAVA数据响应
作者：
js前台分页显示使用jquery1.8.7框架，本文目的主要给那些刚入行软件开发，喜欢这也看看，程序需要有投入才有收获感兴趣的你可不要错过了哈，希望可以帮助到你
好久没有写过代码了，手有些痒了，正好底下小弟们某些功能的实现着实影响工程进度，便自己动手给写了一段。
功能：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样式搭配起来还是非常费劲的。
最后贴个效果图上来：
功能：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样式搭配起来还是非常费劲的。
最后贴个效果图上来：
