jQuery DataTables 警告:table=userTable - JSON 响应无效?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33582203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:57:51  来源:igfitidea点击:

DataTables warning: table=userTable - Invalid JSON response?

jqueryjspservletsdatatablesgson

提问by user3190360

I use jQuery DataTables and get this warning message:

我使用 jQuery DataTables 并收到此警告消息:

DataTables warning: table=userTable - Invalid JSON response

DataTables 警告:table=userTable - JSON 响应无效

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 从 MySQL 获取用户,我想在 jQuery 数据表中显示它,但 Ajax 无法解析 JSON 或 JSON 在 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:

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:

servlet 生成的 JSON:

[
    {
        "id": 1,
        "userName": "userName1",
        "firstName": "firstName1",
        "lastName": "lastName1",
        "email": "[email protected]",
        "phone": "36202080085",
        "location": "location1",
        "password": "password1",
        "gender": "m",
        "birthday": "1-02-2015"
    }
]

回答by Gyrocode.com

There are couple issues with your code:

您的代码有几个问题:

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

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

    "ajax" : {
        "url" : "ListAllUserServlet",
        "type" : "POST",
        "dataSrc": ""
    },
    
  • 您已启用服务器端处理模式,"serverSide": true但您的数据被格式化为客户端处理模式。删除"serverSide": true以使用客户端处理模式。

  • 您需要使用dataSrc: ""如下所示的 ash 来匹配您的 JSON 数据格式,请参阅dataSrc了解更多信息。

    "ajax" : {
        "url" : "ListAllUserServlet",
        "type" : "POST",
        "dataSrc": ""
    },
    

回答by Coding world

Even though all data are showing correctly and also when you get this warning, it can be handled as,

即使所有数据都正确显示并且当您收到此警告时,也可以将其处理为,

$.fn.dataTable.ext.errMode = function(obj,param,err){
                var tableId = obj.sTableId;
                console.log('Handling DataTable issue of Table '+tableId);
        };