按照上次的分页逻辑,分页查询的业务大概需要几个“零件”:1.当前页;2.总页数;3.跳转页。后端需要处理的是:按照传送过来请求的页码返回相应地数据,并且接受初始化参数的请求:总页码、第一页的数据。

  使用ajax请求可以很轻易地和服务器交互,所需要的数据格式是json。json的好处是可以把大量的数据格式化成一条字符串,由前后端的程序进行解析并呈现内容。我把查询到的数据装入list,并用struts自带的工具转换成为json返回客户端。

  前端程序如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pager.js"></script>
</head>
<body> <div >
<table id="content" border="1"> </table>
</div>
<div id="guide">
<!-- 只输入数字的输入框 -->
<button id="prePage" type="button">上一页</button> 当前 第 <span id="current"></span> 页/共 <span id="total"></span> 页 跳转到<input id="jumpPage" size="5" type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")'/> <button id="jumpBtn">跳转到</button> <button id="nextPage" type="button">下一页</button>
</div>
</body>
</html>
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var totalPage;
var currentPage;
var userlist;
//初始化请求--将当前页和总页面初始化 和 list
$(document).ready(function(){ $.get('Init','',function(results){
$.each(results, function(key, val) {
if(key === "current")
currentPage = results[key];
else if(key === "total")
totalPage = results[key];
else if(key == "list"){
userlist=val;
}
});
currentPage = parseInt(currentPage);
totalPage = parseInt(totalPage);
$("#current").text(currentPage);
$("#total").text(totalPage);
getUser(userlist); //console.log(currentPage);
//console.log(totalPage);
});
}); //上一页
$(document).ready(function(){
$('#prePage').click(function(){
if(currentPage == 1)
alert("已至首页");
else{
currentPage = currentPage-1;
var need=currentPage; $.get('Pager','need='+need,function(result){
userlist = result['userList'];
getUser(userlist);
$('#current').text(need);
});
}
});
});
//下一页
$(document).ready(function(){
$('#nextPage').click(function(){
if(currentPage == totalPage)
alert("已至尾页");
else{
currentPage = currentPage+1;
var need=currentPage; $.get('Pager','need='+need,function(result){
userlist = result['userList'];
getUser(userlist);
//console.log(need);
$('#current').text(need);
});
}
}); });
//跳转页
$(document).ready(function(){
$('#jumpBtn').click(function(){
var toPage = $('#jumpPage').val();
if(toPage != ""){
toPage = parseInt(toPage);
if(toPage <= totalPage && toPage >=1)
$.get('Pager','need='+toPage,function(result){
userlist = result['userList'];
getUser(userlist);
//console.log(need);
$('#current').text(toPage);
});
else {
alert("跳转页不合法!");
}
}
});
});
//遍历list并生成table
function getUser(list){
//先清空再添加
var table = $('#content');
table.html("");
var thead = $("<tr></tr>");
thead.appendTo(table);
var tagName = $("<td>id</td>");
tagName.appendTo(thead);
tagName = $("<td>name</td>");
tagName.appendTo(thead);
tagName = $("<td>sex</td>");
tagName.appendTo(thead);
tagName = $("<td>age</td>");
tagName.appendTo(thead); for(var k in list){
var tr=$("<tr></tr>");
tr.appendTo(table);
var person = new Object();
var td; person.id=userlist[k]['id'];
person.name=userlist[k]['name'];
person.sex=userlist[k]['sex'];
person.age=userlist[k]['age']; td=$("<td>"+person.id+"</td>");
td.appendTo(tr);
td=$("<td>"+person.name+"</td>");
td.appendTo(tr);
td=$("<td>"+person.sex+"</td>");
td.appendTo(tr);
td=$("<td>"+person.age+"</td>");
td.appendTo(tr);
//console.log(person);
}
}

  后端逻辑为:

package ActionPackage;

import java.util.HashMap;
import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; import model.test_u;
import pagetest.PageService; public class PageAction extends ActionSupport{
private HashMap<String,Object> dataMap;
private List<test_u> userList;
public List<test_u> getUserList() {
return userList;
}
public void setUserList(List<test_u> userList) {
this.userList = userList;
}
private int size=10;
public String Pager(){
HttpServletRequest request = ServletActionContext.getRequest();
int need = Integer.parseInt(request.getParameter("need"));
System.out.println("need = "+need);
PageService ps = new PageService();
userList = ps.selectLimit((need-1)*size, size);
return SUCCESS;
}
public String Init(){
System.out.println("访问了!");
PageService ps = new PageService();
int total = ps.getConut()/10;
// HttpServletResponse response = ServletActionContext.getResponse();
dataMap = new HashMap<String,Object>();
dataMap.put("current", 1);
dataMap.put("total", total);
List list = ps.selectLimit(1, size);
dataMap.put("list", list);
// String jsonString="{\"current\":1,\"totle\":12}";
// try {
// response.getWriter().print(jsonString);
// } catch (IOException e) {
// // TODO Auto-generated catch block
// e.printStackTrace();
// }
return SUCCESS;
} public HashMap<String, Object> getDataMap() {
return dataMap;
}
public void setDataMap(HashMap<String, Object> dataMap) {
this.dataMap = dataMap;
}
}

  模型层与DAO层与service层如上篇分页一样。

        <action name="Pager" class="ActionPackage.PageAction" method="Pager">
<result type="json">
<!-- 这里指定将被Struts2序列化的属性,该属性在action中必须有对应的getter方法 -->
<param name="root1">userList</param>
</result>
</action>
<action name="Init" class="ActionPackage.PageAction" method="Init">
<result type="json">
<!-- 这里指定将被Struts2序列化的属性,该属性在action中必须有对应的getter方法 -->
<param name="root">dataMap</param>
</result>
</action>

  主要难题:json对象的解析。因为前端代码不是很熟悉,查了很多资料,传回来的数据是Object Object类型的,其实用for循环加上k,v访问就ok了。最后记录动态表格生成的代码。

    var table = $('#content');
table.html("");
var thead = $("<tr></tr>");
thead.appendTo(table);
var tagName = $("<td>id</td>");
tagName.appendTo(thead);
tagName = $("<td>name</td>");
tagName.appendTo(thead);
tagName = $("<td>sex</td>");
tagName.appendTo(thead);
tagName = $("<td>age</td>");
tagName.appendTo(thead);

  效果图:

  

分页进阶--ajax+jquery+struts2的更多相关文章

  1. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  2. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  3. js进阶 14 jquery的ajax有哪些函数和事件(多练)

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  4. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

  5. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  6. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  7. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  8. jPList – 实现灵活排序和分页功能的 jQuery 插件

    jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...

  9. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

随机推荐

  1. iOS-- 重要的链接

    面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html

  2. Beta项目冲刺–第四天

    考试太多,做项目的时间太少-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项 ...

  3. cxf和spring结合,发布restFull风格的服务

    rest(Representational State Transfer):表现层状态转化,它是一种风格,用于资源定位,例如:http://ip:port/user/student/001 和资源操作 ...

  4. 【BZOJ 2599】【IOI 2011】Race 点分治

    裸的点分治,然而我因为循环赋值$s$时把$i <= k$写成$i <= n$了,WA了好长时间 #include<cstdio> #include<cstring> ...

  5. Spring Assert 断言

    Assert(断言)的初步理解构思 Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查, ...

  6. Msyql-检测数据库版本

    show variables like '%version%'; 数据库版本结果: "protocol_version","" "version&qu ...

  7. 4位组合型Excel文档密码怎么破解

    现代社会我们会遇到各种密码,很多的密码我们一段时间不用就不知不觉的忘记了.很多的excel用户就遇到过这种情况,这个时候我们就需要一款Excel密码破解工具.Advanced Office Passw ...

  8. iOS中如何选择delegate、通知、KVO(以及三者的区别)

    转载自:http://blog.csdn.net/dqjyong/article/details/7685933 在开发IOS应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,contr ...

  9. C++ 合成默认构造函数的真相

    对于C++默认构造函数,我曾经有两点误解: 类如果没有定义任何的构造函数,那么编译器(一定会!)将为类定义一个合成的默认构造函数. 合成默认构造函数会初始化类中所有的数据成员. 第一个误解来自于我学习 ...

  10. sql中的xml使用

    SQL openxml用法 使用sp_xml_preparedocument处理XML文档(原文:http://www.cnblogs.com/oec2003/archive/2011/07/23/2 ...