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


Posted in Javascript onMarch 18, 2013

好久没有写过代码了,手有些痒了,正好底下小弟们某些功能的实现着实影响工程进度,便自己动手给写了一段。

功能: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数据响应
Javascript 相关文章推荐
JS 日期比较大小的简单实例
Jan 13 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
侧栏跟随滚动的简单实现代码
Mar 18 #Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 #Javascript
Javascript判断对象是否相等实现代码
Mar 18 #Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 #Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 #Javascript
javascript定时变换图片实例代码
Mar 17 #Javascript
JS前端框架关于重构的失败经验分享
Mar 17 #Javascript
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python使用PIL模块生成随机验证码
2017/11/21 Python
详解python中的index函数用法
2019/08/06 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
tensorflow 变长序列存储实例
2020/01/20 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
通用C#笔试题附答案
2016/11/26 面试题
中等生评语大全
2014/05/04 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
新兵入伍决心书
2015/09/22 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL