Question

我希望能够使用AjaxSource向DataTables传递的动态信息创建表，而不是使用DataTables（jQuery Javascript库的插件）从文档中读取它

脚本：

$(document).ready(function() {
                var oTable;

                 var oTable = $('#yourTable').DataTable( {
                        "processing": true,
                        "serverSide": true,
                        "ajax":{
                            url :"${contextPath}/search/performDeviceSearchRest.do", // json datasource
                            type: "get",  // method  , by default get
                            dataType: 'json',
                            error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown) }
                        }
                    } );                                
            });

JSP

<table cellpadding="0" cellspacing="0" border="0" class="display normaltable" id="yourTable">
                                <thead>
                                    <tr>                            
                                        <th ><fmt:message key="license.number"/></th>
                                        <th ><fmt:message key="Product.name" /></th>
                                        <th ><fmt:message key="list.category" /></th>                                           
                                        <th ><fmt:message key="list.manufacturer"/></th>
                                        <th ><fmt:message key="list.country"/></th>
                                        <th ><fmt:message key="list.retailer"/></th>
                                    </tr>
                                    <tr class="thefilters">                         
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>                                          
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th><fmt:message key="license.number"/></th>
                                        <th><fmt:message key="Product.name"/></th>
                                        <th><fmt:message key="list.category" /></th>
                                        <th><fmt:message key="list.manufacturer"/></th>
                                        <th><fmt:message key="list.country"/></th>
                                        <th><fmt:message key="list.retailer"/></th>
                                    </tr>
                                </tfoot>

                            </table>

如果我只是将网址放在浏览器${contextPath}/search/performDeviceSearchRest.do

中

我得到了这个，所以一切似乎都没问题

{"products":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}

但是在数据表上我只看到处理...

http://debug.datatables.net/ewenav

我在控制台中收到此错误：未捕获TypeError：无法读取属性＆＃39; length＆＃39;未定义的

在

的**for ( var i=0, ien=data.length ; i<ien ; i++ ) { **行中

/**
     * Data the data from the server (nuking the old) and redraw the table
     *  @param {object} oSettings dataTables settings object
     *  @param {object} json json data return from the server.
     *  @param {string} json.sEcho Tracking flag for DataTables to match requests
     *  @param {int} json.iTotalRecords Number of records in the data set, not accounting for filtering
     *  @param {int} json.iTotalDisplayRecords Number of records in the data set, accounting for filtering
     *  @param {array} json.aaData The data to display on this page
     *  @param {string} [json.sColumns] Column ordering (sName, comma separated)
     *  @memberof DataTable#oApi
     */
    function _fnAjaxUpdateDraw ( settings, json )
    {
        // v1.10 uses camelCase variables, while 1.9 uses Hungarian notation.
        // Support both
        var compat = function ( old, modern ) {
            return json[old] !== undefined ? json[old] : json[modern];
        };

        var draw            = compat( 'sEcho',                'draw' );
        var recordsTotal    = compat( 'iTotalRecords',        'recordsTotal' );
        var rocordsFiltered = compat( 'iTotalDisplayRecords', 'recordsFiltered' );

        if ( draw ) {
            // Protect against out of sequence returns
            if ( draw*1 < settings.iDraw ) {
                return;
            }
            settings.iDraw = draw * 1;
        }

        _fnClearTable( settings );
        settings._iRecordsTotal   = parseInt(recordsTotal, 10);
        settings._iRecordsDisplay = parseInt(rocordsFiltered, 10);

        var data = _fnAjaxDataSrc( settings, json );
        for ( var i=0, ien=data.length ; i<ien ; i++ ) {
            _fnAddData( settings, data[i] );
        }
        settings.aiDisplay = settings.aiDisplayMaster.slice();

        settings.bAjaxDataGet = false;
        _fnDraw( settings );

        if ( ! settings._bInitComplete ) {
            _fnInitComplete( settings, json );
        }

        settings.bAjaxDataGet = true;
        _fnProcessingDisplay( settings, false );
    }

Answer 1

在你的json结果中，尝试用“data”替换“products”。我认为DataTables想要一个专门命名为“data”的参数中的数据。

{"products":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}

{"data":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}

jQuery DataTable + sAjaxSource + Spring（服务器端处理）处理

1 个答案: