jquery datatable的无效json响应

时间:2014-03-05 06:03:34

标签: jquery

我有一个jquery数据表示例。我想从服务器端获取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>

我永远不会在xhtml页面中更改get json数据的模型。 什么是问题?

1 个答案:

答案 0 :(得分:2)

当我使用带有IE的Datatables时,我遇到了类似的问题,Datatables从服务器获得的所有json都是有效的,但每当我尝试使用IE“DataTables warning(table id ='example')时,我都收到同样的消息错误):DataTables:无效的JSON响应“。相同的代码适用于Chrome和Firefox。

经过大量测试后,我注意到了我的回复听众,并注意到没有设置内容类型。在我将响应的内容类型设置为'application / json'并将charset编码设置为'UTF-8'后,问题tyhe代码适用于IE,Chrome和Firefox。