我有一个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();
}
}
问题是什么?我已经尝试了很多,但似乎没有什么可以解决这个警告。
答案 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": []
});