JQuery не отображает результат JSON через datatable из-за Uncaught TypeError
У меня есть 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
, Застрял на "Processing..."
, Я проверил элемент в консоли Chrome, который говорит,
Uncaught TypeError: Cannot read property 'length' of undefined
В var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );