我有一个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 );