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>

css代码:

<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. 结果如下:

时间: 2024-08-05 04:19:28

Strust2 + JSON + jquery 分页表格显示数据的相关文章

ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询

一.说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2. 首先预览一下界面: 本例实现的功能: 1.多标签 2.分页列表显示数据 3.获取选中行的标识值,删除选中行 实现以上功能主要使用了: 1.layout:布局 2.tabs:多标签 3.datagrid:表格显示数据,并可以分页 4.messager:消息框 5.window:窗口 要了解用法,下载之后,参阅demo文件夹下的demo和官方文档.

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

jQuery操作列表数据转成Json再输出为html dom树

jQuery 把列表数据转成Json再输出为如下 dom树 <div id="menu" class="lv1"> <ul class="menu"> <li><a href="#" class="parent"><span>aaaaaaaaaaa</span></a> <div class="lv2&quo

jQuery+Ajax+PHP+Mysql实现分页显示数据

css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; curs

2016/4/2 json:js和jquery中轻量级数据交换格式 例: 窗口弹出 popwindow

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中 数据由逗号分隔

032.Ajax+Json+Jquery

AjjA: AjaxJ: JSONJ: jQuery -----------------------------------------------JSONJavascript Object NotationJS对象标记 class User{ public int Id{get;set;} public string Name{get;set;} public string Phone{get;set;} // public string HomeAddress{get;set;} // pu

easyui-datagrid连接数据库实现分页查询数据

一.利用MVC思想建立底层数据库: package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.boot.registry.StandardServiceRegistr

Jquery 分页

分页:可以说是所有做程序的开发者的必须会的,分页有很多种,当然最终还是以业务为需求取决于哪一种方法,下面我介绍的是 SQL语句结合Jquery做的一个Jquery的分页插件,通过个人三年的经验总结的一下东西,不知道是否好用.适用性如何,不过我是用顺手了,如果你觉得好用,谢谢分享下,不好用或者您有什么改进的方法,留言,谢谢知道,不多说 JS做分页首先你得了解下闭包的概念(我在这里也说清楚,自己度娘下) 分页参数:当前页(_PageIndex) .显示条数(_PageSize).总条数(_PageC

Django-choices字段值对应关系(性别)-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Ajax 实现效果 contentType 前后端传输数据编码格式 ajax 提交数据 ajax发 json 格式数据 ajax 传文件 序列化组件 利用 sweetalert 搭建页面(弹窗) 弹窗中文支持不太好,手动修改样式 页面数据没刷新的问题 自定义分页器 批量插入测试数据 bulk_creat