- 浏览: 221202 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
Ajax 实现分页及表与表的级联
时间过的真快转眼间有快到周末了,真向往每周周末的时光。今天我们的项目经理是不是头脑发热,让我用ajax实现公司职工表的增,删,改,查,分页查询;着实让我头疼;经理之命不可违啊,写了一天终于完成了;今天想把实现分页的方法写在博客中和大家交流交流。
首先,我对数据中的表进行了分析:
如图
经过分析表中有个deptnoo 部门编号字段与数据库中的dept(如图)表相对应 及将表中的编号换成部门名称,所以此处要实现表与表的级联
主要实现代码如下
这里我主要写ajax实现代码
首先将数据封装,(bean)让后写业务实现层(dao),在些逻辑实现层(service);及MCV框架开发,大家都熟悉吧这就不多说了。
再创建一个jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>worker.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="./js/util.js" type="text/javascript"></script>
<script src="./js/emp.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
//
$("addemp").style.display = "none";
$("upemp").style.display="none";
}
</script>
</head>
<body>
<h1>
用户查询的请求
</h1>
<input type="button" value="查询所有用户" onclick="selectEmp()" />
<div id="content">
<table border="1px" cellpadding="0" cellspacing="0">
<caption>
员工信息表
</caption>
<thead>
<tr>
<th>
编号
</th>
<th>
姓名
</th>
<th>
岗位
</th>
<th>
入职时间
</th>
<th>
领导
</th>
<th>
薪水
</th>
<th>
奖金
</th>
<th>
部门
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="listemps">
</tbody>
</table>
</div>
<div id="pageinfo">
<a href="javascript:getPageInfo(1)">首页</a>
<a href="javascript:getPageInfo(2)" >上一页</a>
<a href="javascript:getPageInfo(3)">下一页</a>
<a href="javascript:getPageInfo(4)">末页</a>
</div>
</body>
</html>
Ajax代码
var empdoc ; function getPageInfo(mark) { var nowpage = empdoc.getAttribute("nowpage"); var countpage = empdoc.getAttribute("countpage"); switch (mark) { case 1: nowpage=1; break; case 2: nowpage--; break; case 3: nowpage++; break; case 4: nowpage=countpage; break; } //获取xhr对象 var xhr = getXhr(); //封装请求信息 xhr.open("get", "./listEmp.do?nowpage="+nowpage, true); //发送请求 xhr.send(); //根据服务器端传递xhr.readyState触发的事件进行处理 xhr.onreadystatechange = function() { //根据readyState是否处理完毕,status服务是否返回成功 if (xhr.readyState == 4 && xhr.status == 200) { //获得xml的document对象 var doc = xhr.responseXML; //获取xml文件的跟标签 var root = doc.documentElement; //获取跟标签的所有子节点 var emps = root.childNodes; //获取tbody对象 var listemps = document.getElementById("listemps"); listemps.innerHTML = ""; for ( var i = 0; i < emps.length; i++) { //判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器 if (emps[i].nodeType == 1) { var emptr = document.createElement("tr"); //获取该节点下面的所有子节点 var empcs = emps[i].childNodes; for ( var j = 0; j < empcs.length; j++) { var emptd = document.createElement("td"); //判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器 if (empcs[j].nodeType == 1) { emptd.appendChild(document .createTextNode(empcs[j].firstChild.nodeValue)); emptr.appendChild(emptd); } } var dutd = document.createElement("td"); emptr.appendChild(dutd); listemps.appendChild(emptr); } } } } }
Servlet中定义nowpage,countpage
String npage = request.getParameter("nowpage");
int nowpage = 1;
if (npage == null) {
} else {
nowpage = Integer.valueOf(npage);
}
// 创建业务对象
EmpServiceImpl esi = new EmpServiceImpl();
int countrecord = esi.getCountRecord();
int countpage = countrecord % EmpServiceImpl.PAGESIZE == 0 ? countrecord
/ EmpServiceImpl.PAGESIZE
: countrecord / EmpServiceImpl.PAGESIZE + 1;
if(nowpage<=1){
nowpage=1;
}
if(nowpage>=countpage){
nowpage=countpage;
}
List<Emp> emps = esi.findNowPageInfo(nowpage);
// 如果以xml数据返回响应 必须设置头位如下方式,并且放在响应的第一行
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<emps nowpage='" + nowpage + "' countpage='" + countpage
+ "'>");
for (Emp emp : emps) {
out.println("<emp>");
out.println("<empno>" + emp.getEmpno() + "</empno>");
out.print("<ename>" + emp.getEname() + "</ename>");
out.println("<job>" + emp.getJob() + "</job>");
out.print("<hiredate>" + emp.getHiredate() + "</hiredate>");
out.println("<mgr>" + emp.getMgr() + "</mgr>");
out.print("<sal>" + emp.getSal() + "</sal>");
out.print("<comm>" + emp.getComm() + "</comm>");
out.print("<deptno>" + emp.getDeptno() + "</deptno>");
out.println(" </emp>");
}
out.println("</emps>");
out.flush();
out.close();
在实现表与表的级联时 就要将dept数据查询,然后利用ajax创建option添加到select中去
<tr>
<td>部门:</td>
<td>
<select name ="deptno" id="deptno">
<option value="10">请选择部门</option>
</select>
</td>
</tr>
Ajax代码
function listDepts(doc, value) { //获取根节点 var root = doc.documentElement; //获取根节点的子节点 var depts = root.childNodes; //获取HTML dom 对象 var deptnos = document.getElementById("deptno"); //遍历 for ( var i = 0; i < depts.length; i++) { //判读是否是元素节点,目的是兼容各个浏览器 if (depts[i].nodeType == 1) { var dptoption = document.createElement("option"); var eles = depts[i].childNodes; for ( var j = 0; j < eles.length; j++) { if (eles[j].nodeType == 1) { if (j == 0) { if (value == eles[j].firstChild.nodeValue) { dptoption.setAttribute("selected", true); } dptoption.setAttribute("value", eles[j].firstChild.nodeValue); } else if (j == 1) { dptoption.appendChild(document .createTextNode(eles[j].firstChild.nodeValue)); } } } deptnos.appendChild(dptoption); } } }
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1784项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20738(原创)javascript 实现批量打印《简历》 ... -
java+Ckeditor
2012-03-23 18:09 1877CKEditor 二次开发 ---- 为 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1332@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42074异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 27751,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1510概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1903错误信息: javax.servlet.Servle ... -
Jquery从入门到精通及附件下载(一)
2011-03-30 08:15 3773Jquery从入门到精通及 ... -
Json 浅谈及解析
2011-03-25 17:07 2203Json 浅谈及解析 Json简介 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1208预测本周五 java 考试题!! 1,加载类有哪几 ... -
DOM总结(三)及综合案例
2011-03-17 20:59 1042DOM总结(三)及综合案例 1,DOM属性-----re ... -
DOM 总结(二)
2011-03-16 20:30 1265DOM 总结(二) 查找元素的方法: 1 ... -
DOM 总结(一)
2011-03-16 20:24 1417DOM 总结(一) ... -
javascript实现全选,反选及全不选
2011-03-15 19:53 1360javascript实现全选,反选及全部选 html 代 ... -
仿谷歌,百度分页计算分析 代码实现
2011-03-10 19:32 1958仿谷歌,百度分页计 ... -
Java反射概念及类的反射的实例应用
2011-03-04 10:32 2302Java反射概念及类的反射的实例 一、反射的概念 : ... -
BeanUtils工具包下载及应用
2011-03-04 10:23 18648BeanUtils工具包下载及应用 ... -
“世界上最复杂的邮件”诞生了
2011-03-04 08:04 1271“世界上最复杂的邮件” ...
相关推荐
.net省市ajax级联和ajax分页 带省市数据库
ajax实现增删改查、分页、级联等功能源码 博文链接:https://yinghuayu1324117.iteye.com/blog/974614
在网上看到的;希望可以让大家喜欢 【摘 要】 就是采用 Ajax 方式,即开始只载入第一层菜单的内容,当用户选中第一层菜单的某项时,再通过 XmlHttpRequest 来获取相应选项所对应的第二层菜单的内容。
发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,...
第2章 采用ASP.net Ajax1.0实现Hello Word程序。 第3章 实现Ajax GridView模块。 第4章 实现了聊天室模块(利用ASP.net Ajax)。 第5章 ASP.net Ajax Control Toolkit控件应用。包括:利用AutoCompleteExtender控件...
实例61 实现级联菜单的设计 实例62 PHP+Ajax树状菜单 第8章 Ajax数据库操作 实例63 显示数据库系统信息 实例64 实现数据库常见操作 实例65 完成数据库多种查询显示 实例66 数据库记录自动提示 实例67 AjaX...
使用rad网格的自定义分页和级联过滤的设计和实现。
利用Ajax可以通过使用滑块的滑动来选择所显示的分页,这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本文件 /img 系统使用的图片文件夹 第22章(/ch22) ...
《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》光盘 完整源代码 有3个完整的jsp网站 第1章 设计Web标准网页 1.1 设个人主页 1.2 设计CSS 1.3 设计新闻查看页面 1.4 设计博客网站首页 1.5 CSS设计页面布局 ...
jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示, 实现起来都非常的简单,往往就是几句代码的事。 做AJAX应用,jquery提供的$.get()、$.post()函数...
利用php与ajax做了一个小小的例子,其中包括登录、增删改查、文件的上传和下载、省市二级级联菜单以及分页。注意:要是在别的机器上,有1个地方需要改一下:1.proupload.php文件里面的$uploaddir = 'D:/apache/...
9. 用ajax技术实现一个级联菜单功能。 10.写出插入法进行排序代码。 11.编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串。 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",...
1)监控源当前仅支持网络矿工定制的采集任务,通过配置网络矿工采集任务,及实现了对互联网任意数据的监控; 2)监控规则支持关键词定义、数值范围等监控规则; 3)数据处理方式支持直接入库、保存网页地址及...
使用Relations建立表之间的关系并却使用PagedDataSource类对DataList进行分页 通过作业,定时同步两个数据库 SQLSERVER高级注入技巧 利用反射实现ASP.NET控件和数据实体之间的双向绑定,并且在客户端自动验证输入的...
这个小项目使用jsf+richfaces+hiberante设计,作为学习jsf和hibernate的新手学习参考.里面由基本上有常规项目所需一般功能:比如ajax.分页.hibernate级联操作等等
07 recv与recvfrom的区别及基于udp实现ntp服务 08 基于tcp实现远程执行命令 09 基于tcp实现远程执行命令测试结果 10 粘包现象 11 粘包解决方法 第31章 01 上节课复习 02 socketserver实现并发 03 socketserver模块...
第3章 struts 2标签库详解与ajax技术应用 103 3.1 struts 2主题与模板 103 3.2 struts 2控制标签详解 105 3.2.1 if/elseif/else标签详解 105 3.2.2 iterator标签详解 106 3.2.3 append标签详解 108 3.2.4 ...