jquery datatable's invalid json response

Question

I have a jquery datatable sample. I want to get json data from server side. but when I run it I encounter with this error:

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

server side data:

"{\"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>

I never would to change model of get json data in xhtml page. what is problem?

Answer 1

I had a similar problem when I used Datatables with IE, all json that the Datatables got from server was valid, but everytime I recieved the same message error when I tryed to use IE "DataTables warning (table id = 'example'): DataTables: invalid JSON response". The same code worked in Chrome and Firefox.

After a lot of tests, I paid attention at my response hearder and I noted that the content type was not setted. After I was setted the response´s content type to 'application/json' and charset encoding to 'UTF-8' the problem tyhe code worked for IE, Chrome ans Firefox.