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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
前端微信支付js代码
Jul 25 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 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
php 远程关机操作的代码
2008/12/05 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jquery 可排列的表实现代码
2009/11/13 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python实现的双色球生成功能示例
2017/12/18 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python中if嵌套命令实例讲解
2021/02/25 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
中学生运动会入场词
2014/02/12 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
中学生思想品德评语
2014/12/31 职场文书
销售业务员岗位职责
2015/02/13 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Nginx速查手册及常见问题
2022/04/07 Servers
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL