好久没有写过代码了，手有些痒了，正好底下小弟们某些功能的实现着实影响工程进度，便自己动手给写了一段。
功能：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="https://www.jb51.net/js/jquery-1.8.7.min.js"></script>
<LINK href="https://www.jb51.net/images/style.css" type="text/css">
</head>
<body>
<div>
<p>
采购单状态:
<select>
<option value="" SELECTED>-search all!-</option>
<option value="未结">未结</option>
<option value="部分">部分</option>
<option value="已结">已结</option>
</select>
<input type="button" value="查询" />
<br>
</p>
</div>
<div>
<table cellpadding="0" cellspacing="0" bordercolorlight="#3B4D61" bordercolordark="#ffffff">
</table>
</div>
<br>
<div>
<table cellpadding="0" cellspacing="0">
</table>
</div>
</body>
<script type="text/javascript">
//填充页面信息
function writePageList(curpage,wholePage){
var pageContent = "";
if(curpage != 1){
pageContent += "<a href='#'><b>第一页</b></a> ";
pageContent += "<a href='#'><b>上一页</b></a> ";
}
if(curpage != wholePage){
pageContent += "<a href='#'><b>下一页</b></a> ";
pageContent += "<a href='#'><b>最后一页</b></a> ";
}
if(1 == wholePage){
pageContent += "<a href='#'><b>当前只有一页</b></a> ";
}
pageContent += "页数：<label>"+curpage+"</label>/<label>"+wholePage+"</label> ";
pageContent += " <input type='text' size='5'/><input type='button' value='>>跳转'/>";
// 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>采购编号</b></td>"+
"<td><b>经手人</b></td>"+
"<td><b>订单日期</b></td>"+
"<td><b>备注</b></td>"+
"<td><b>状态</b></td>"+
"<td><b>操作1</b></td>"+
"<td><b>操作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>"+
"<option value='"+String(item.orderstatus)+"' SELECTED>未结</option>"+
"<option value='未结'>未结</option>"+
"<option value='部分'>部分</option>"+
"<option value='已结'>已结</option>"+
"</select></td>"+
"<td><input type='button' value='修改状态'/></td>"+
"<td><input type='button' value='查看详情'/></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)
复制代码 代码如下: