如何获取搜索结果并使用struts 2应用程序中的数据表进行渲染

时间:2014-10-09 15:59:40

标签: java jquery struts2 datatables jquery-datatables

我有一个struts 2应用程序,我想在其中使用数据表来获取搜索结果并显示它们。屏幕如下图所示。

enter image description here

我希望它最终看起来像这样,我想使用数据表来获取ajax调用的结果。

enter image description here

我有一个动作类(Dashboard.java),其方法名为viewSearchResult(),如下所示。

import java.util.List;

import com.opensymphony.xwork2.ActionSupport;
import com.schenker.ocean.dao.SearchUpdateDAO;
import com.schenker.ocean.vo.Shipment;

public class Dashboard extends ActionSupport{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    //members
    private String stt;
    private String hawb;
    private String chi;
    private String invoice;
    private String shipment;
    private String Search;
    private String tabIndex;
    private String searchType;
    private List<Shipment> aaData;
    public String getTabIndex() {
        return tabIndex;
    }
    public void setTabIndex(String tabIndex) {
        this.tabIndex = tabIndex;
    }
    public String getSearch() {
        return Search;
    }
    public void setSearch(String search) {
        Search = search;
    }
    //getters and setters for members
    public String getStt() {
        return stt;
    }
    public void setStt(String stt) {
        this.stt = stt;
    }
    public String getHawb() {
        return hawb;
    }
    public void setHawb(String hawb) {
        this.hawb = hawb;
    }
    public String getChi() {
        return chi;
    }
    public void setChi(String chi) {
        this.chi = chi;
    }
    public String getInvoice() {
        return invoice;
    }
    public void setInvoice(String invoice) {
        this.invoice = invoice;
    }
    public String getShipment() {
        return shipment;
    }
    public void setShipment(String shipment) {
        this.shipment = shipment;
    }

    //methods
    public String getDashboard(){

        return "success";
    }

    public String viewSearchResult(){
        SearchUpdateDAO sudao= new SearchUpdateDAO();
        aaData=sudao.getViewSearch(chi, stt, hawb, invoice, shipment, "");
        return "success";
    }
    public String assignSearchResult(){
        return "success";
    }
    public String shipDocsResult(){
        return "success";
    }
    public String assignUpdateResult(){
        return "success";
    }
    public String getSearchType() {
        return searchType;
    }
    public void setSearchType(String searchType) {
        this.searchType = searchType;
    }
    public List<Shipment> getAaData() {
        return aaData;
    }
    public void setAaData(List<Shipment> aaData) {
        this.aaData = aaData;
    }
}

我的jsp页面(左侧也有搜索菜单)位于下方。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" HREF="css/styles.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
/* $(document).ready(function() { */
    function postJSONData(){

        var view = $('#view').val(); 
        var assign = $('#assign').val(); 
        var search=$('').val(); 
        var stt=$('[name="stt"]').val();
        var hawb=$('[name="hawb"]').val();
        var chi=$('[name="chi"]').val();
        var invoice=$('[name="invoice"]').val();
        var shipment=$('[name="shipment"]').val();
            $('#viewTable').dataTable( {

            } );
        };       

    /* }); */

</script>
<title></title>
  <style type="text/css" media="screen">
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }

  #header {
    /* background: #ccc; */
    padding: 0px;
    }

  #sidebar {
    float: left;
    width: 20%;
    background: #C7C7C7;
    }

  #content {
    margin-left: 22%;
    }

  #footer {
    clear: right;
    /* background: #eee; */
    padding: 0px;
    }

  </style>

</head>

<body bgcolor="#ffffff" style="border: none; padding: 0px;"> 
<div id="header">
    <table width="100%" height="20%">
        <tr>
            <td width="50%" height="1"
                style="font-family: arial; font-size: 15px;" id="ezlogowrap" colspan="5"><img
                src="images/ez-view-logo.png"></td>
            <td width="50%" valign="top" style="padding-right: 15px;"  colspan="5"><div
                    id="logowrap" align="right">
                    <img src="images/DbSchenkerLogo.gif" alt="DB Schenker logo">
                </div></td>
        </tr>
        <!-- <tr><td  colspan="10" height="25%"></td></tr> -->
        <tr>
            <td colspan="10"
                style="background: #000066; width: 100%; height: 36px;">&nbsp;</td>
        </tr>
        <tr><td  colspan="10" height="25%"></td></tr>
    </table>
</div>
<div id="sidebar">
<table width="20%" align="left">
                            <s:form name="searchForm" action="getDashboard" method="post">
                                <tr>
                                    <th align="center" colspan="2">Search</th>
                                </tr>
                                <tr>
                                     <td colspan="1"><s:textfield size="20" maxlength="20" name="stt" key="label.stt"></s:textfield> </td>
                                </tr>
                                <tr>
                                    <td colspan="1"><s:textfield size="20" maxlength="20" name="hawb" key="label.hawb"></s:textfield> </td>
                                </tr>
                                <tr>
                                    <td colspan="1"><s:textfield size="20" maxlength="20" name="chi" key="label.chi"></s:textfield> </td>
                                </tr>
                                <tr>
                                    <td colspan="1"><s:textfield size="20" maxlength="20" name="invoice" key="label.invoice"></s:textfield> </td>
                                </tr>
                                <tr>
                                    <td colspan="1"><s:textfield size="20" maxlength="20" name="shipment" key="label.shipment"></s:textfield> </td>
                                </tr>
                                <tr>
                                    <td align="right" style="padding-top: 2px;" colspan="2"><s:submit key="label.search"  onclick="postJSONData();" ></s:submit> </td>
                                </tr>
                                </s:form>
                            </table>
</div>
<div id="content">
    <table align="left">
    <tbody>
    <tr>
    <td colspan="8">
    <div id="display jqueryDataTable">
        <table  id="viewTable">
            <thead>
            <tr>
                <th>System</th>
                <th>Doctype</th>
                <th>STT</th>
                <th>HAWB</th>
                <th>CHI</th>
                <th>Invoice</th>
                <th>Shipment</th>
                <th>Shipdate</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>System</th>
                <th>Doctype</th>
                <th>STT</th>
                <th>HAWB</th>
                <th>CHI</th>
                <th>Invoice</th>
                <th>Shipment</th>
                <th>Shipdate</th>
            </tr>
        </tfoot>
        </table>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
</div>
<div id="footer">
<table width="100%" height="20%">
        <tr>
            <td colspan="10"
                style="background: #000066; width: 100%; height: 25px;"><div
                    align="center" class="style1"
                    style="font-size: 11px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; padding-left: 5px;">DB
                    Schenker, Inc. &copy; 2014</div></td>
        </tr>
    </table>
</div>
</body>
</html>

下面是struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
    <!-- <constant name="struts.enable.DynamicMethodInvocation" value="true" /> -->
    <constant name="struts.devMode" value="true"/>
    <constant name="struts.custom.i18n.resources" value="ApplicationResources"/>
    <!-- <constant name="struts.enable.SlashesInActionNames" value="true" />
    <constant name="struts.mapper.alwaysSelectFullNamespace" value="true" /> -->

    <package name="logindefault" extends="struts-default,json-default">

        <action name="login" method="execute" class="com.schenker.ocean.actions.LoginAction">
            <result name="success">/searchpage.jsp</result>
            <result name="input">/login.jsp</result>
            <result name="fail">/login.jsp</result>
        </action>

    </package>

    <package name="default" extends="logindefault" namespace="/">

        <action name="login" method="execute" class="com.schenker.ocean.actions.LoginAction">
            <result name="success">/searchpage.jsp</result>
            <result name="input">/login.jsp</result>
            <result name="fail">/login.jsp</result>
        </action>
        <action name="getDashboard" method="getDashboard" class="com.schenker.ocean.actions.Dashboard">
            <result name="success">/searchpage.jsp</result>
            <result name="input">/login.jsp</result>
            <result name="fail">/login.jsp</result>
        </action>
        <action name="viewSearchResult" method="viewSearchResult" class="com.schenker.ocean.actions.Dashboard">
            <result name="success">/searchpage.jsp</result>
            <result name="input">/login.jsp</result>
            <result name="fail">/login.jsp</result>
        </action>
    </package>


</struts>

我的问题是如何获取数据表来调用viewSearchResult()并传递searchform中的参数?我如何确保响应由数据表处理,而不是由struts转发到另一个页面?

1 个答案:

答案 0 :(得分:0)

您可以使用struts-json插件以json格式从动作类中获取响应。稍后渲染使用任何一种javascript方法(jQuery,jTable,dojo等)

要从动作类作为json对象返回,您必须在struts动作定义中将返回类型设置为json,如下所示。

<action name="writeJSON" class="com.rajesh.json.ReadJSON" method="writeJSON">
<result type="json" />

要通过ajax向服务器发送和接收数据并通过json获取响应,请参阅以下链接。

Send json data to struts 2 action

Read json data from struts 2 action