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代码
Mar 11 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
JavaScript 是什么意思
Sep 22 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
js实现tab切换效果
Feb 16 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
vue 数据双向绑定的实现方法
Mar 04 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文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP学习笔记之session
2018/05/06 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
原生js实现弹幕效果
2020/11/29 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Django  ORM 练习题及答案
2019/07/19 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
python opencv肤色检测的实现示例
2020/12/21 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
消防安全责任书
2014/04/14 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
写给医院的感谢信
2015/01/22 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年语文教学工作总结
2015/05/25 职场文书