DataTables警告:请求的未知参数' userId'

时间:2017-09-18 10:53:40

标签: java jquery ajax twitter-bootstrap datatable

我有一个webapp,它使用jQuery,Ajax和bootstrap。当我调用deleteRow(userId)或add()函数时,我收到一个警告:

DataTables警告:table id = datatable - 请求的未知参数' userId'对于第0行第0列。有关此错误的详细信息,请参阅http://datatables.net/tn/4

我的桌面jsp代码如下:

<table class="table table-striped display" id="datatable">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Image</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <c:forEach items="${users}" var="user">
                            <jsp:useBean id="user" scope="page" type="model.User"/>
                        <tr>
                            <td>${user.userId}</td>
                            <td>${product.name}</td>
                            <td>${product.address}</td>
                            <td><img src="${product.imageUrl}"></td>
                            <td><a><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></td>
                            <td><a onclick="deleteRow(${user.userId})"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                        </tr>
                        </c:forEach>
                    </table>

我的js脚本:

var ajaxUrl = "ajax/users/";
function updateTable() {
    $.get(ajaxUrl, updateTableByData);
}
$(function () {
    datatableApi = $("#datatable").DataTable({
        "paging": true,
        "info": true,
        "columns": [
            {
                "data": "userId"
            },
            {
                "data": "name"
            },
            {
                "data": "address"
            },
            {
                "data": "imageUrl",
                "orderable": false
            },
            {
                "defaultContent": "Edit",
                "orderable": false
            },
            {
                "defaultContent": "Delete",
                "orderable": false
            }
        ],
        "order": []

    });
    makeEditable();
});

function deleteRow(productId) {
    $.ajax({
        url: ajaxUrl + productId,
        type: "DELETE",
        success: function () {
            updateTable();
            successNoty("Deleted");
        }
    });
}

我的控制器:

@RestController
@RequestMapping("ajax/users")
public class AjaxUserController
{
    @Autowired
    private UserService service;

    @DeleteMapping("/{userId}")
    public void delete(@PathVariable("userId") int userId)
    {
        service.delete(userId);
    }

    @GetMapping(produces = MediaType.APPLICATION_JSON_VALUE)
    public List<User> getAll()
    {
       return service.getAll();
    }
}

问题是什么?我已经尝试了很多,但似乎没有什么可以解决这个警告。

1 个答案:

答案 0 :(得分:0)

我刚刚意识到你实际上并没有使用JSON来构建这个表。它是根据您正在构建的HTML构建的。列上的data property用于JSON结果,从HTML构建时应省略。请试一试

datatableApi = $("#datatable").DataTable({
    "paging": true,
    "info": true,
    "columns": [
        null,
        null,
        null,
        {
            "orderable": false
        },
        {
            "defaultContent": "Edit",
            "orderable": false
        },
        {
            "defaultContent": "Delete",
            "orderable": false
        }
    ],
    "order": []

});