Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataTables warning: table=userTable - Invalid JSON response?

I use jQuery DataTables and get this warning message:

DataTables warning: table=userTable - Invalid JSON response

A servlet fetch users from MySQL which I want to display in a jQuery Datatable, but Ajax can't parse the JSON or the JSON is generated wrong in servlet?

Servlet:

    List<UserDTO> users = this.service.getAllUser();
                Gson gson = new Gson();
                request.setAttribute("users", gson.toJson(users));
                request.getRequestDispatcher("listAllUser.jsp").forward(request, response);

JSP:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Registered Users</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script
        src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet"
        href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
    <link rel="stylesheet"
        href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">
    <script>
        $(document).ready(function() {
            $('#userTable').dataTable({
                "processing" : true,
                "serverSide" : true,
                "ajax" : {
                    "url" : "ListAllUserServlet",
                    "type" : "POST"
                },
                "columns" : [ {
                    "data" : "id"
                }, {
                    "data" : "userName"
                }, {
                    "data" : "firstName"
                }, {
                    "data" : "lastName"
                }, {
                    "data" : "email"
                }, {
                    "data" : "phone"
                }, {
                    "data" : "location"
                }, {
                    "data" : "password"
                }, {
                    "data" : "gender"
                }, {
                    "data" : "birthday"
                } ]
            });
        });
    </script>

    </head>
    <body>
        <table id="userTable" class="display">
            <thead>
                <tr>
                    <th colspan="10" id="userList">Users</th>
                </tr>
                <tr>
                    <th>User id</th>
                    <th>User name</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Location</th>
                    <th>Password</th>
                    <th>Gender</th>
                    <th>Birth date</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <td colspan="10"><a href="index.jsp" id="toIndex">Back</a></td>
                </tr>
            </tfoot>
        </table>

    </body>
    </html>

JSON generated by servlet:

[
    {
        "id": 1,
        "userName": "userName1",
        "firstName": "firstName1",
        "lastName": "lastName1",
        "email": "[email protected]",
        "phone": "36202080085",
        "location": "location1",
        "password": "password1",
        "gender": "m",
        "birthday": "1-02-2015"
    }
]
like image 539
user3190360 Avatar asked Nov 07 '15 11:11

user3190360


People also ask

What is Datatable warning?

DataTables warns about the use of them by default, as the majority of the time they are not intended for display - for example, rather than showing null in the table, you might want to show Not yet set, or simply an empty string (empty cell). For this, DataTables has a columns. defaultContent option.

What is JSON response in WordPress?

Basically, WordPress needs to communicate with the server while you are editing a blog post. It relies on getting responses from the web hosting server in the background. This response is usually in JSON format which is used to quickly transport data using JavaScript.


1 Answers

There are couple issues with your code:

  • You have enabled server-side processing mode with "serverSide": true but your data is formatted for client-side processing mode instead. Remove "serverSide": true to use client-side processing mode.

  • You need to use dataSrc: "" ash shown below to match your JSON data format, see dataSrc for more information.

    "ajax" : {
        "url" : "ListAllUserServlet",
        "type" : "POST",
        "dataSrc": ""
    },
    
like image 52
Gyrocode.com Avatar answered Nov 09 '22 13:11

Gyrocode.com