由于Uncaught TypeError,JQuery不通过数据表显示JSON结果

时间:2014-03-20 10:11:50

标签: java datatable jquery-select2 struts2-json-plugin

我有一个display:table,由Jquery datatable包裹,它通过分页,搜索和排序提供客户端处理。现在将其转换为ServerSide处理。 display:table通过调用下面描述的fetchPageVisitReport操作来获取数据:

@Action(value="fetchPageVisitReport")
@Validations
public String fetchReport() {
    isReportFetched=true;
    pageVisitLogList = new ArrayList<PageVisitLog>();
    List<PageVisitLog> resultList;


    String table = AppConstants.PageVisitLogLogArchiveConstants.LESS_THAN_15_DAYS.getValue();
    resultList = pageVisitLogDAO.findPageVisitLogList(dateFrom, dateTo, module, deviceMacAddress, facility, appMode, currentLocale, table);
    pageVisitLogList.addAll(resultList);
    if (dateFrom.compareTo(ObjectUtils.get3MonthsBeforeDate()) < 0){
        table = AppConstants.PageVisitLogLogArchiveConstants.ARCHIVE.getValue();
        resultList = pageVisitLogDAO.findPageVisitLogList(dateFrom, dateTo, module, deviceMacAddress, facility, appMode, currentLocale, table);
        pageVisitLogList.addAll(resultList);

    }
    populateMapValues();

    return SUCCESS;
}

display:table通过下面描述的Jquery datatable显示此表:

<display:table name="pageVisitLogList" class="table table-striped table-bordered" requestURI="" uid="row" export="true">
        <display:setProperty name="export.excel.filename"><s:property value="pageVisitLogExcelFileName"/></display:setProperty>
        <display:setProperty name="export.xml" value="false"/>
        <display:setProperty name="export.csv" value="false"/>
        <display:setProperty name="export.banner">
            <div class="searchHeader"> Export Report in: {0} </div>
        </display:setProperty>

        <display:column property="deviceMacAddress" title="Mac Address" media="excel"/>
        <display:column title="Mac Address" media="html" style="width:15%;">
             <s:url id="deviceInfoByMac" action="fetchMacSummaryPage">  
                <s:param name="deviceMacAddress" value="%{#attr.row.deviceMacAddress}" />  
             </s:url>  
             <s:a href="%{deviceInfoByMac}" style="color: mediumblue;">
                <s:property value="%{#attr.row.deviceMacAddress}"/>
             </s:a>
          </display:column>
        <display:column property="deviceName" title="Device" style="width:15%;"/>
        <display:column property="facility" title="Facility" style="width:20%;"/>
        <display:column  title="Session Id" style="width:10%;">
        <s:if test="%{#attr.row.sessionId<1}">

        </s:if>
        <s:else>
            <s:property value="%{#attr.row.sessionId}"/>
        </s:else>
        </display:column>
        <display:column property="visitTime" title="Visit Time"  format="{0,date,MM/dd/yyyy HH:mm:ss}" style="width:15%;"/>
        <display:column property="module" title="Module" style="width:10%;"/>
        <display:column title="App Mode" style="width:20%;">
            <s:if test="%{#attr.row.appMode == 0}">
                Educator Mode
            </s:if>
            <s:elseif test="%{#attr.row.appMode == 1}">
                Patient Mode
            </s:elseif>
        </display:column>
        <display:column title="Locale" style="width:20%;">
            <s:if test="%{#attr.row.currentLocale == 0}">
                English
            </s:if>
            <s:elseif test="%{#attr.row.currentLocale == 1}">
                Spanish
            </s:elseif>
        </display:column>
        <display:column property="pageVisited" title="Page Visited" style="width:15%;"/>
        <display:column property="comments" title="Comments" style="width:10%;"/>
      </display:table>

和Jquery是:

            $('#row').dataTable(
        {
             "sDom" : "<'row'<'spanPag'l><'span6'p><'spanSer'f>r>t<'row'<'spanPage'i><'span6'p>>",
            "sPaginationType" : "bootstrap",
            "oLanguage" : {"sLengthMenu" : "_MENU_ records per page"},

            "bServerSide": true,
            "sAjaxSource": "serverSideSearch.action?dateFrom="+$('#fromDate').val()+"&dateTo="+$('#toDate').val(),
            "bProcessing": true,
            "bJQueryUI": true ,
            "sAjaxDataProp" : "aaData",
            "aoColumns": [
                              { "mDataProp": "deviceMacAddress"},
                              { "mDataProp": "deviceName"}, 
                              { "mDataProp": "facility" },
                              { "mDataProp": null },
                              { "mDataProp": "visitTime"},
                              { "mDataProp": "module"},
                              { "mDataProp": "appMode"},
                              { "mDataProp": "currentLocale"},
                              { "mDataProp": "pageVisited"},
                              { "mDataProp": "comments"}
                          ]   

        });

现在,对于服务器端处理,我有一个操作serverSideSearch已过滤列表aaData,然后添加到jsonResponse

    @Action(value="serverSideSearch")
public String serverSideSearch() throws IOException{

      //    Filtering Processes...

    Gson gson = new Gson();
    jsonResponse = new JsonObject();

        jsonResponse.addProperty("sEcho", sEcho);
        jsonResponse.addProperty("iTotalRecords", iTotalRecords);
        jsonResponse.addProperty("iTotalDisplayRecords", iTotalDisplayRecords);
        jsonResponse.add("aaData", gson.toJsonTree(aaData));
        jsonResponse.toString();


    System.out.println(jsonResponse);
    return SUCCESS; 
      }

该行动的结果是

@Result(name=ActionSupport.SUCCESS , type="json", params={"root", "excludeNullProperties", "true", "root", "jsonResponse"})

serverSideSearch结束时,jsonResponse正在aaData

{"aaData":[{"pageLogId":485431,"pageVisited":"Connected to WiFi Network","deviceMacAddress":"xx:xx:xx:xx:xx:xx","module":"WiFi","visitTime":"Mar 5, 2014 6:40:07 AM","dateEntered":"Mar 5, 2014 6:41:46 AM","visitTimeLong":0,"appMode":0,"currentLocale":0,"comments":"Network Name: guestnet, Network Security: OPEN","facility":"Tampa General Hospital","deviceName":"Gil, Laura"}...so on]}

但是Jquery没有显示修改/收到的jsonResponse。它停留在&#34; Processing..."上。我在Chrome控制台中检查了元素,其中说明了

Uncaught TypeError: Cannot read property 'length' of undefined 

var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );

0 个答案:

没有答案