jQuery DataTable + sAjaxSource + Spring (обработка на стороне сервера) Обработка

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

СПЯ

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

Если Я просто поставил URL в браузере ${contextPath}/search/performDeviceSearchRest.do

Я получил это, так что все seemd быть ОК

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

Но на DataTable я вижу только Обработка ...

http://debug.datatables.net/ewenav

Я получаю эту ошибку в консоли: Uncaught TypeError: Не удается прочитать свойство 'length' undefined

в строке **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, попробуйте заменить "продукты" с "данными". Я думаю, что 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"}]}