1

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 );
    }
1
  • Are you getting any errors in your console in your browsers? Commented Feb 12, 2016 at 9:50

1 Answer 1

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"}]}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.