2014-03-05 129 views
0

我有一個jQuery數據表示示例。我想從服務器端獲取json數據。jquery datatable的無效json響應

DataTables warning (table id = 'example'): DataTables: invalid JSON response 

服務器端數據:

"{\"aaData\":[" + 
      "{\"engine\": \"Trident\",\"browser\": \"Internet Explorer 4.0\",\"platform\": \"Win 95+\"}" + 
      "{\"engine\": \"Trident\",\"browser\": \"Internet Explorer 5.0\",\"platform\": \"Win 95+\"}" + 
      " ]}" 

dataTableView.xhtml:但是當我運行它,我這個錯誤遇到

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:composite="http://java.sun.com/jsf/composite"> 
<composite:interface> 
</composite:interface> 

<composite:implementation> 
    <style type="text/css" title="currentStyle"> 
     @import "/resources/css/demo_table.css"; 
    </style> 

    <script type="text/javascript" charset="utf-8"> 

     $(document).ready(function() { 
      $('#example').dataTable(
        { 
         /****************get data****************/ 
         "aLengthMenu": [ 
          [5, 10, -1], 
          [5, 10, "All"] 
         ], 
         "bProcessing": true, 
         "bServerSide": true, 
         "ajax": { 
          "url": "/DataTableServlet", 
          "dataSrc": "aaData", 
          "type": "GET" 
         }, 
         "aoColumns": [ 
          { "mData": "engine" }, 
          { "mData": "browser" }, 
          { "mData": "platform" } 
         ], 
         "aoColumnDefs": [ 
          { 
           "mData": null, 
           "aTargets": [ 1 ], 
           "sClass": "center", 
           "mRender": function (data, type, row) { 
            return ("&lt;button>" + data[1] + "&lt;/button>"); 
           } 
          } 
         ] 
        }); 
      /****************click event code****************/ 
      $("#example tbody").click(function (event) { 
       $(oTable.fnSettings().aoData).each(function() { 
        $(this.nTr).removeClass('row_selected'); 
       }); 
       $(event.target.parentNode).addClass('row_selected'); 
      }); 

      $("#example").on('click', 'tbody tr', function (event) { 
       var aPos = oTable.fnGetPosition(this); 
       var aData = oTable.fnGetData(aPos); 
       gIDNumber = aData[1]; 
       $(PrimeFaces.escapeClientId('#{p:component('value')}')).val(gIDNumber); 
      }); 

      oTable = $('#example').dataTable(); 
     }); 
    </script> 

    <!-- *********************** PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL PANEL ****************--> 

    <p:panel header="hello" id="x"> 
     <div id="dynamic"> 
      <table style="cellpadding:0 ;cellspacing:0 " border="0" class="display" 
        id="example"> 
       <thead> 
       <tr> 

        <th style="width: 3%">engin</th> 
        <th style="width: 3%">browser</th> 
        <th style="width: 3%">platform</th> 


       </tr> 
       </thead> 
      </table> 
     </div> 
     <br/> 
     <br/> 
     <h:inputText id="value" value="click rows"/> 
    </p:panel> 
</composite:implementation> 
</ui:composition> 

我永遠不會改變獲取JSON數據模型在xhtml頁面。 什麼是問題?

+0

可能會幫助你[** Datatables JQuery完整的示例和配置**](http://www.jquery2dotnet.com/p/datatables-jquery-full-example-and.html) – Sender

+0

非常感謝「巴特爾」 – hossein

回答

2

當我在IE中使用Datatables時,我遇到了類似的問題,數據表從服務器獲得的所有json都是有效的,但是當我嘗試使用IE「DataTables warning(table id ='example)時,每次收到相同的消息錯誤'):DataTables:無效的JSON響應「。 Chrome和Firefox使用相同的代碼。

經過大量測試後,我注意到了我的回覆聽衆,並注意到內容類型未設置。將響應的內容類型設置爲'application/json'並將字符集編碼設置爲'UTF-8'後,問題代碼適用於IE,Chrome和Firefox。