Strust2 + JSON + jquery 分页表格显示数据
浏览数：29 /
时间：2015年06月09日
有了之前几篇文章关于Strus2+json结合的基础，自己也尝试着写分页表格显示数据的代码。也不枉花了些时间，终于搞定了，“纸上得来终觉浅，觉知此事要躬行”，哈哈，不多说，具体如下：
1. 前端页面 --- html代码+css代码+js代码
html代码：
<body class="body">
<table class="tab">
<tr class="tr_0">
<td class="td_1">序号</td>
<td class="td_2">名称</td>
<td class="td_3">症状</td>
<td class="td_4">病因</td>
<td class="td_5">防治措施</td>
</tr>
</table>
<div class="pageBtn">
第<span class="currentPage"> </span>页，共<span class="totalPage"></span>页
<span id="firstPage" class="pageClick">首页</span>
<span id="prev" class="pageClick">上一页</span>
<span id="next" class="pageClick">下一页</span>
<span id="lastPage" class="pageClick">最后一页</span>
<span id="jump" class="pageClick">跳至</span> 第<input type="text" class="page_input">页
</div>
</body>
<style type="text/css">
.body{margin:50px;}
.tab{font-size:13px;border-collapse:collapse; }
.tab td{border:1px solid #211;text-align:center;}
.td_1{width:28px;}
.td_2{width:92px;}
.td_3,.area_1{width:150px;}
.td_4,.area_2{width:150px;}
.td_5,.area_3{width:180px;}
.tab textarea{overflow:auto;border:0;font-size:13px;}
.pageBtn{font-size:14px;margin-top:20px;}
.pageBtn span{cursor:pointer;}
.pageClick{padding-left:10px;padding-right:10px;}
.page_input{margin-left:5px;margin-right:5px;width:45px;text-align:center;}
</style>javascript代码：
<script type="text/javascript" src="js/jquery1.9.1.js"></script>
<script charset="gb2312" type="text/javascript" >
$(function () {
var total = 0; //数据表中的记录总数
var pageSize = 4; //一个页面显示4条记录
var curPage = 1; //当前页面变量
$.post("page/countAll",null, function (data) {
total = data.count;
$(".currentPage").text("1");
showPage(1,4); // 打开页面默认显示第一页
var pageTotal = Math.ceil(total/pageSize); //总页数
$(".totalPage").text(pageTotal); //总页数信息写到前台页面
$("#next").click(function() {
if (curPage == pageTotal) {
alert("这是最后一页");
curPage = pageTotal;
} else {
curPage++;
gotoPage(curPage,total);
}
});
$("#prev").click(function() {
if (curPage == 1) {
alert("这是第一页");
curPage = 1;
} else {
curPage--;
gotoPage(curPage,total);
}
});
$("#firstPage").click(function() {
curPage = 1;
gotoPage(curPage,total);
});
$("#lastPage").click(function() {
curPage = pageTotal;
gotoPage(curPage,total);
});
$("#jump").click(function(){
if($(".page_input").val() <= pageTotal && $(".page_input").val() != ''){
curPage = $(".page_input").val();
gotoPage(curPage,total);
}else{
alert("您输入的页码有误！");
$(".page_input").val('').focus();
}
});
});
});
function showPage(curPage,total){// 表格方式显示获取的数据
$.ajax({
url: "page/show",
data: { "PageIndex": curPage},
type: "post",
dataType: "json",
success: function (data) {
var result = eval(data.result);
$(".tab tr:gt(0)").remove();
$.each(result, function(i,o) {
$(".tab").append($("<tr><td>" + o.id
+ "</td><td>" +o.name + "</td><td><textarea class='area_1'>"
+ o.symptom + "</textarea></td><td><textarea class='area_2'>"
+ o.reason + "</textarea></td><td><textarea class='area_3'>"
+ o.cure + "</textarea></td></tr>"));
});
}
});
}
function gotoPage(curPage,total) {
$(".currentPage").text(curPage);
showPage(curPage,total);
}
</script>2. strust.xml配置信息：
<struts> <constant name="struts.devMode" value="true" /> <package name="ajaxPage" extends="json-default" namespace="/page"> <action name="show" class="testaction.PageJsonAjaxAction" method="showPage"> <result name="success" type="json"></result> </action> <action name="countAll" class="testaction.PageJsonAjaxAction" method="countAll"> <result name="success" type="json"></result> </action> </package> </struts>
3. 后台action类 --- PageJsonAjaxAction.java
相关的jar包截图如下，我的jar包全放在/WebRoot/WEB-INF/lib下的
package testaction;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import net.sf.json.JSONArray;
import net.sf.json.JSONException;
import net.sf.json.JSONObject;
import sql.SQLConnection;
import com.opensymphony.xwork2.ActionSupport;
/**@author 小霞
* 2014/12/23
* */
public class PageJsonAjaxAction extends ActionSupport{
private static final long serialVersionUID = 1L;
private int pageIndex;//接收页面传来的第几页的数字
private int count;//保存记录总数
private String result;//作为响应结果以json格式传递到前台页面
/**
* 三个变量的getter及setter，在没有任何设定的情况下，该类下的所有getter方法的返回值将被包含
* 在返回给客户端的JSON字符串中。要剔除不需要包含的属性，在类结构结构中需要在getter方法上使
* 用@JSON(serialize=false)进行注解,当然在不影响其他业务的时候也可以直接去掉这个getter方法。
* */
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public int getPageIndex() {
return pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
/**查询数据表全部的记录个数*/
public String countAll() throws SQLException{//获取数据表的总记录数
System.out.println("Page count begins....");
Connection con = new SQLConnection().getConnection();
String sql = "select * from desease";
JSONObject jo = new JSONObject();
int c = 0;
try {
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(sql);
while(rs.next()){
c++;
}
count = c;
System.out.println("the count is "+count);
jo.element("count",c);
result = jo.toString();
} catch (SQLException e) {
e.printStackTrace();
}finally{
con.close();
}
System.out.println("Page count ends....");
return SUCCESS;
}
/**查询对应页面应有的结果集记录*/
public String showPage() throws SQLException{
System.out.println("Show page begins...");
int m = pageIndex * 4;//m-3 ~ m
Connection con = new SQLConnection().getConnection();
String sql;
if( m == 4){
sql="select* from desease where id<5";
}else{
sql="select top 4 * from desease where (id not in(select top "+(m-4)+" id from desease))";//"select * from desease where id<"+index+"";
}
try {
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(sql);
result = resultSetToJson(rs);
} catch (SQLException e) {
e.printStackTrace();
}finally{
con.close();
}
System.out.println("Show page ends....");
return SUCCESS;
}
/**查询的结果集记录直接变成JSON对象*/
public String resultSetToJson(ResultSet rs) throws SQLException,JSONException {
// json数组
JSONArray array = new JSONArray();
// 获取列数
ResultSetMetaData metaData = rs.getMetaData();
int columnCount = metaData.getColumnCount();
// 遍历ResultSet中的每条数据
while (rs.next()) {
JSONObject jsonObj = new JSONObject(); // 遍历每一列
for (int i = 1; i <= columnCount; i++) {
String columnName =metaData.getColumnLabel(i);
String value=rs.getString(columnName);
jsonObj.put(columnName, value);
}
array.element(jsonObj);
}
return array.toString();
}
}4. 结果如下：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
