Data error while tring to display a YUI DataTable in Spring MVC

I am doing a project regarding Spring and YUI Data table.

I am using controller to return JSON string and at the view will use the JSON string as data source to generate a data table. But somehow the data table displays "Data error".

Here is the code for my controller:

@RequestMapping(value = "/report") public ModelAndView getViolationReport(Long violation_num){

        ComplLog origViolation = null;
        //HashMap<Long, BRMap> logdetailsmap = new HashMap<Long, BRMap>();

        Map<String,String> map = new HashMap<String, String>();

        map.put("col1", "value1");
        map.put("col2", "value2");
        map.put("col3", "value3");
        map.put("col4", "value4");
        map.put("col5", "value5");

        List<Map<String,String>> list = new ArrayList<Map<String,String>>();
        list.add(map);

        ModelAndView mav = new ModelAndView();

        mav.addObject("detailList", list);
        mav.setViewName("GetViolationReport");      //return the model to the GetViolationReport.jsp          
        return mav;
}

Here is my index.jsp file:

<% response.sendRedirect("/app/ViolationReportService.app"); %>

Here is my view, GetViolationReport.jsp:

<body class="yui-skin-sam" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div id="scroller" class="scrollPane">
    <c:out value = "${detailList}" />    
</div>
<div id="basic"></div> 
</body>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = function() {
    var myColumnDefs = [
        {key:"col1", sortable:true, resizeable:true},
        {key:"col2", sortable:true, resizeable:true},
        {key:"col3", sortable:true, resizeable:true},
        {key:"col4", sortable:true, resizeable:true},
        {key:"col5", sortable:true, resizeable:true}

    ];
 var myDataSource = new YAHOO.util.XHRDataSource("app/violationreport/report");
    myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
    myDataSource.responseSchema = {
        metaFields : {
            totalRecords : "detailmap.totalRecordsFound",
            recordsReturned : "detailmap.totalRecordsFound",
            invocationStatus : "invocationStatus",
            startIndex : 0,
            executionStatusMessage : "executionStatusMessage"
        },
        resultsList : "detailList",
        fields : [ "col1","col2","col3","col4","col5" ] 
    }
var myDataTable = new YAHOO.widget.DataTable("basic",
            myColumnDefs, myDataSource, {initialLoad: true, caption:"DataTable Caption"});

    return {
        oDS: myDataSource,
        oDT: myDataTable
    };
 }();
});
</script>

And the actoolkit-config.xml is like this:

<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
    <property name="favorParameter" value="true" /> 
    <property name="mediaTypes">
        <map>
            <entry key="json" value="application/json" /> 
            <entry key="html" value="text/html" /> 
            <entry key="plain" value="text/plain" /> 
            <entry key="octet" value="application/octet-stream" /> 
        </map>
    </property>
    <property name="viewResolvers">
        <list>
            <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
            <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
                <property name="viewClass"
                    value="org.springframework.web.servlet.view.JstlView" />
                <property name="prefix" value="/WEB-INF/jsp/" />
                <property name="suffix" value=".jsp" />
            </bean>
        </list>
    </property>

    <property name="defaultViews">
        <list>
            <bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" />                   
        </list>
    </property>
    <property name="defaultContentType" value="application/json" /> 
</bean>

There is no error in the console, but when i go to the url that supposed to generate the data table, it displayed a data table with columns I defined but content showes "Data error".

Can someone please help me with this?

Solution

And what does the data actually look like? What is it that the browser receives? I don't understand your non-JavaScript code and even if I did, sometimes it happens that there is some error in the code and the server is throwing an error message which the client cannot parse. So, open the debugger in the browser and look at what the browser actually gets.