jQuery DataTable + sAjaxSource + Spring ( Server-side processing ) Processing

Question

I want to be able to create a table from dynamic information passed using a AjaxSource to DataTables, rather than having it read from the document using DataTables (a plug-in for the jQuery Javascript library)

the script:

$(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) }
                        }
                    } );                                
            });

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

If I just put the URL in the browser ${contextPath}/search/performDeviceSearchRest.do

I got this , so everything seemd to be OK

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

But on the datatable I only see Processing...

http://debug.datatables.net/ewenav

I am getting this error in the console: Uncaught TypeError: Cannot read property 'length' of undefined

in the line **for ( var i=0, ien=data.length ; i<ien ; i++ ) {** of

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

In your json result, try replacing "products" with "data". I think DataTables wants the data in a parameter specifically named "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"}]}