环境准备
1.dataTables
下载：http://download.csdn.net/detail/marskuroky/8173839
2.jsonObject
下载：http://download.csdn.net/detail/marskuroky/8173831
前台代码
只是简单测试，把bean放在了session中，方便提取
<jsp:useBean id="userInfo" class="XXX.UserInfoSessionBean" scope="session"></jsp:useBean>
dataTables代码展开，放到相应的路径（我的/WEB-INF/JS/）
jsp代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page import="XXX.Const"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <jsp:useBean id="userInfo" class="XXX.UserInfoSessionBean" scope="session"></jsp:useBean> <% String basePath = request.getContextPath() + "/"; %> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <link href="<%=basePath%>js/DataTables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" media="screen" /> <link href="<%=basePath%>js/DataTables/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="<%=basePath%>js/DataTables/media/js/jquery.js"></script> <script type="text/javascript" src="<%=basePath%>js/DataTables/media/js/jquery.dataTables.js"></script> <style type="text/css"> .borRed{ color:red; } </style> <script type="text/javascript" language="javascript"> var tmail = <%=userInfo.getMailAddr()%> alert(tmail[0].adOwnId); $(document).ready(function() { //$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' ); alert(222); $("#example").dataTable({ "aaData": tmail, "aoColumns": [ { "mDataProp": "selectedRateUsd" }, { "mDataProp": "selectedRateJpy" }, { "mDataProp": "adOwnId" }, { "mDataProp": "connDbId" }, ] } ); }); </script> <title>Insert title here</title> </head> <body> <div id="contents"> <table id="example"> <thead> <tr> <th>test1</th> <th>test2</th> <th>test3</th> <th>test4</th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html>
后台代码
List<UserInfoSessionBean> list = new ArrayList<UserInfoSessionBean>(); UserInfoSessionBean bean1 = new UserInfoSessionBean(); bean1.setAdOwnId(1); bean1.setConnDbId("222"); list.add(bean1); UserInfoSessionBean bean2 = new UserInfoSessionBean(); bean2.setAdOwnId(2); bean2.setConnDbId("444"); list.add(bean2); JSONArray json = JSONArray.fromObject(list); // userInfo是准备存在session中的bean userInfo.setMailAddr(json.toString());