首页 > 代码库 > Strust2 + JSON + jquery 分页表格显示数据
Strust2 + JSON + jquery 分页表格显示数据
有了之前几篇文章关于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=http://www.mamicode.com/"true" />>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 = http://www.mamicode.com/rs.getMetaData(); >
4. 结果如下：
Strust2 + JSON + jquery 分页表格显示数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。