JQuery not displaying JSON result via datatable due to Uncaught TypeError

Question

I have a display:table, wrapped up by Jquery datatable, which provides client side processing over pagination, searching and sorting. Now m converting it to ServerSide processing. display:table fetches the data by calling fetchPageVisitReport action described below:

@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;
}

The display:table shows this table via Jquery datatable described below:

<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>

and the Jquery is :

            $('#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"}
                          ]   

        });

Now for serverside processing, I have an action serverSideSearch which has filtered list aaData and then added in 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; 
      }

And Result of that action is

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

At the end of serverSideSearch , jsonResponse is having 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]}

But the Jquery is not displaying the modified/received jsonResponse. It is stuck on "Processing...". I inspected element in Chrome console, which says,

Uncaught TypeError: Cannot read property 'length' of undefined 

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