java - 为什么这个 *jquery.dataTables.js* 示例不起作用？

Question

为什么这个 DataTables.js 示例失败？

这是一个足够简单的示例，并且代码似乎是正确的。
-但是，它因异常而失败......(见下文)

(代码有什么问题？...-或者，我还可以查看哪些内容来确定并解决问题？)

感谢您的帮助。

更多信息如下...

这是 HTML...

    <form id="page0Form">
        <table class="table table-striped table-hover" id="myGrid"></table>    
    </form>     

这是设置数据表的 JavaScript...

    var jq = jQuery.noConflict();

    jq(document).ready(function () 
    {
        jq('#myGrid').dataTable({
            "ajax": "page0/tableData",
            "columns": [
                {"data": "testvala"},
                {"data": "testvalb"},
                {"data": "testvalc"}
            ]
        });
    });

这是 AJAX 调用返回的 JSON 字符串...

    {"data":[{"testvala":"valuea0","testvalb":"valueb0","testvalc":"valuec0"},{"testvala":"valuea1","testvalb":"valueb1","testvalc":"valuec1"},{"testvala":"valuea2","testvalb":"valueb2","testvalc":"valuec2"}]}

这是包含返回 JSON 字符串的方法的 java 类...

    import com.fasterxml.jackson.databind.ObjectMapper;
    import java.io.IOException;
    import javax.servlet.http.HttpSession;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.apache.log4j.Logger;
    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.HashMap;
    import javax.servlet.http.HttpServletRequest;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;

    @Controller
    @RequestMapping("/page0")
    @Scope("session")
    public class Page0Controller implements Serializable
    {
        private static final Logger LOG = Logger.getLogger("Page0Controller");
        private static final long serialVersionUID = 5024226983105965553L;

        //...........................................................    
        //...........................................................
        //...NOTE: this is the method that returns the JSON string...
        //...........................................................    
        //...........................................................    
        @RequestMapping(value = {"/tableData"}, method = RequestMethod.GET)    
        @ResponseBody    
        public String tableData(HttpServletRequest request, HttpSession session)
        {
            LOG.info("______________________tabledata______________________entering...");

            String testbeanlistjson = "";        
            ArrayList<TestBean> testBeanList = new ArrayList<TestBean>();        
            for (int i=0; i<3; i++)
            {
                testBeanList.add(new TestBean(
                    "valuea" + i,
                    "valueb" + i,
                    "valuec" + i
                ));
            }

            try
            {
                HashMap<String, ArrayList<TestBean>> data = new HashMap<>();                
                data.put("data", testBeanList);    
                ObjectMapper mapper = new ObjectMapper();          
                testbeanlistjson = mapper.writeValueAsString(data); //(testBeanList);  //(data); //(testBeanList);
                session.setAttribute("testbeanlistjson", testbeanlistjson);
            }
            catch (IOException e)
            {
                LOG.error("______________________tabledata______________________Exception - e.getMessage()=" + e.getMessage(), e);
            }

            LOG.info("______________________tabledata______________________testbeanlistjson=" + String.valueOf(testbeanlistjson));
            //Gson gson = new Gson();
            //testbeanlistjson = gson.toJson(testBeanList);

            return testbeanlistjson;
        }        

        @RequestMapping(value = "", method = RequestMethod.GET)
        public ModelAndView page0(ModelMap model, HttpSession session)
        {
            LOG.info("____________________page0___________________entering...");
            return new ModelAndView("page0");
        }    
    }

这是屏幕输出...

这是发生的异常...

这是发生 javascript 异常的 jquery.dataTables.js 方法...

    -
    -
    -
    /**
     * Draw the table for the first time, adding all required features
     *  @param {object} settings dataTables settings object
     *  @memberof DataTable#oApi
     */
    function _fnInitialise ( settings )
    {
        var i, iLen, iAjaxStart=settings.iInitDisplayStart;
        var columns = settings.aoColumns, column;
        var features = settings.oFeatures;

        /* Ensure that the table data is fully initialised */
        if ( ! settings.bInitialised ) {
            setTimeout( function(){ _fnInitialise( settings ); }, 200 );
            return;
        }

        /* Show the display HTML options */
        _fnAddOptionsHtml( settings );

        /* Build and draw the header / footer for the table */
        _fnBuildHead( settings );
        _fnDrawHead( settings, settings.aoHeader );
        _fnDrawHead( settings, settings.aoFooter );

        /* Okay to show that something is going on now */
        _fnProcessingDisplay( settings, true );

        /* Calculate sizes for columns */
        if ( features.bAutoWidth ) {
            _fnCalculateColumnWidths( settings );
        }

        for ( i=0, iLen=columns.length ; i<iLen ; i++ ) {
            column = columns[i];

            if ( column.sWidth ) {
                column.nTh.style.width = _fnStringToCss( column.sWidth );
            }
        }

        // If there is default sorting required - let's do it. The sort function
        // will do the drawing for us. Otherwise we draw the table regardless of the
        // Ajax source - this allows the table to look initialised for Ajax sourcing
        // data (show 'loading' message possibly)
        _fnReDraw( settings );

        // Server-side processing init complete is done by _fnAjaxUpdateDraw
        var dataSrc = _fnDataSource( settings );
        if ( dataSrc != 'ssp' ) {
            // if there is an ajax source load the data
            if ( dataSrc == 'ajax' ) {
                _fnBuildAjax( settings, [], function(json) {
                    var aData = _fnAjaxDataSrc( settings, json );

                    // Got the data - add it to the table
                    for ( i=0 ; i<aData.length ; i++ ) {
                        _fnAddData( settings, aData[i] );
                    }

                    // Reset the init display for cookie saving. We've already done
                    // a filter, and therefore cleared it before. So we need to make
                    // it appear 'fresh'
                    settings.iInitDisplayStart = iAjaxStart;

                    _fnReDraw( settings );

                    _fnProcessingDisplay( settings, false );
                    _fnInitComplete( settings, json );
                }, settings );
            }
            else {
                _fnProcessingDisplay( settings, false );
                _fnInitComplete( settings );
            }
        }
    }

    -
    -
    -

javascript 库等...:

Bootstrap v3.3.2

DataTables v1.10.5 (org.webjars)

jackson-core v2.3.4 (com.fasterxml.jackson.core)

Jackson-databind v2.3.4 (com.fasterxml.jackson.core)

Spring MVC v3.2.8

Answer 1

@ResponseBody 注解自动为 Controller 方法的返回对象提供序列化，但您还使用 ObjectMapper 来序列化您的 aData，所以问题可能取决于此。

当我为 DataTables 插件实现服务器端分页时，我返回一个对象映射 aData。我创建了一个简单的库来实现此目的:https://bitbucket.org/davioooh/datatablepager

查看源代码。这可能会有所帮助。