jquery_datatables

浏览数：37 / 时间：2015年06月09日

环境准备

　　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());