2014-03-05 91 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。