我想使用 JQuery 数据表显示我的数据库数据,但一直收到错误,因为
数据表警告:表 ID =myTable - 请求未知 第 0 行,第 0 列的参数"产品 ID"。
我已经 http://datatables.net/tn/4 参考了以下网站,但我仍然找不到任何错误,我正在使用 spring mvc 和休眠,这是我的代码-
收费代码:
package controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import model.dao.IProductsDAO;
import model.daoimpl.ProductsDAOImpl;
import model.entity.Products;
@Controller
public class ProductController {
@RequestMapping(value="/manageproducts", method= RequestMethod.GET)
public String manageProductPage() {
return "manageproducts";
}
@RequestMapping(value="/insertproducts",method = RequestMethod.POST)
public String addInserProductsPage(@ModelAttribute("Products")Products p) {
IProductsDAO ip = new ProductsDAOImpl();
boolean b = ip.insertProduct(p);
if(b)
return "success";
else
return "manageproducts";
}
@RequestMapping(value="/listproducts", method = RequestMethod.GET)
public String listAllProducts(Model model){
IProductsDAO ip = new ProductsDAOImpl();
List<Products> products = ip.getProducts();
model.addAttribute ("products",products);
return "listallproducts";
}
}
JSP 文件:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script
src="//https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$.ajax({
url: 'http://localhost:8080/ProjectFE/listproducts',
method: 'get',
datatype: 'json',
success: function (data){
$('#myTable').DataTable({
data: data,
columns: [
{'data': 'productId'},
{'data': 'productName'},
{'data': 'unitPrice'},
{'data': 'productDescription'},
{'data': 'category'},
{'data': 'productQty'}
]
});
}
});
});
</script>
<title>List of Products</title>
</head>
<body>
<table id="myTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Description</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</thead>
</table>
</body>
</html>
那我应该在这里做什么?请帮忙!!
谢谢。
试试这个
finalData = [];
$.ajax({
url: 'http://localhost:8080/ProjectFE/listproducts',
method: 'get',
datatype: 'json',
success: function (data){
console.log("data length: ", data.length); //to show the length of data
console.log("data : ", data); //show the data coming from backend
for (var j = 0; j < data.length; j++) {
var list = {};
list.productId = data[i].productId;
list.productName = data[i].productName;
list.unitPrice = data[i].unitPrice;
list.productDescription = data[i].productDescription;
list.category = data[i].category;
list.productQty = data[i].productQty;
finalData.push(list);
}
$('#myTable').DataTable({
data: finalData,
columns: [
{'data': 'productId'},
{'data': 'productName'},
{'data': 'unitPrice'},
{'data': 'productDescription'},
{'data': 'category'},
{'data': 'productQty'}
]
});
}
});
});