我使用jQuery DataTables在spring 4.x应用程序中创建一个语句页面来呈现语句。
通过Jackson消息转换器解析后，服务器返回了以下对象。
{
"data":[
{
"desc":"SUBWAY 00501197 BRONX NYUS",
"amount":"-",
"date":"5.72"
},
{
"desc":"MIDTOWN COMICS NEW YORK NYUS",
"amount":"-",
"date":"73.32"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"BIMG PRIMARY CARE NEW YORK NYUS",
"amount":"-",
"date":"25.00"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"Walgreens Speci 205 8THNEW YORK NYUS",
"amount":"-",
"date":"10.00"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"9.99"
},
{
"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",
"amount":"-",
"date":"35.93"
},
{
"desc":"SHUN FA RELAXING CENTE NEW YORK NYUS",
"amount":"-",
"date":"20.00"
},
{
"desc":"CHIPOTLE 0590 NEW YORK NYUS",
"amount":"-",
"date":"9.00"
},
{
"desc":"CHIPOTLE 0590 NEW YORK NYUS",
"amount":"-",
"date":"9.00"
},
{
"desc":"ALEX CLEANERS BRONX NYUS",
"amount":"-",
"date":"58.95"
},
{
"desc":"SUBWAY 00501197 BRONX NYUS",
"amount":"-",
"date":"5.17"
},
{
"desc":"PAYPAL *LAROMANAAPA 4029357733 CAUS",
"amount":"-",
"date":"103.20"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"4.99"
},
{
"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"4.99"
},
{
"desc":"LA ISLA RESTAURANT #2 NEW YORK NYUS",
"amount":"-",
"date":"12.75"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",
"amount":"-",
"date":"7.62"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"3.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
},
{
"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",
"amount":"-",
"date":"1.99"
}
]
}
现在我尝试将此传递给数据表，如下所示。但是我得到了一个错误。
$('#example').dataTable(data)
但它给我一个错误如下所示：
DataTables警告：table id = example - 无法重新初始化DataTable。有关此错误的详细信息，请参阅https://datatables.net/manual/tech-notes/3。
此外，呈现的表还有数据代替列名，看起来错了。
以下是我的控制器
@RequestMapping(value = "/getStmt", method = RequestMethod.GET)
public @ResponseBody HashMap<String,ArrayList<UserStatement>> getStatement(@RequestParam(required = true) String name, @RequestParam(required = true) String month, HttpServletRequest request, Model model){
System.out.println(name+", "+month+"");
User user = userDao.findUserByName(name);
ArrayList<UserStatement> s=new ArrayList<UserStatement>();
if (user != null && user.getUser_token()!=null) {
s = (ArrayList<UserStatement>) userDao.getUserSelectedStatement(user.getUser_token(), 07, 2015);
}else{
UserStatement us =new UserStatement();
us.setAmount("A user token could not be found for the user ");
s.add(us);
}
HashMap<String, ArrayList<UserStatement>> h=new HashMap<String, ArrayList<UserStatement>>();
h.put("data", s);
return h;
}
以下是我的Ajax功能
$(document).ready(function(){
var today = new Date();
var month=today.getMonth();
var name="test";
$.ajax({
type: "GET",
url: "getStmt.ajax",
data: "name="+name+"&month="+month,
success: function(msg){
$('#stdata').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
var data1 = JSON.stringify(msg);
console.log(data1);
console.log(data1.data);
console.log( "Data Saved: " + msg );
$('#example').dataTable( {
"aaData": data,
"aoColumns": [
{"sTitle": "Description"},
{"sTitle": "Amount" },
{"sTitle": "Date" }
]
} );
},
error: function(msg){
var data = msg;
console.log( "There was an error: " + msg );
$('#stdata').dataTable( {
"ajax": data,
"columns": [
{ "title": "Description" },
{ "title": "Amount" },
{ "title": "Date" },
{ "title": "Balance" }
]
} );
}
});
});
和html：
<div class="panel-body">
<div id="stdata">
</div>
</div>
该表应位于stdata div。
我怎样才能让它发挥作用？我也想要这样一种方式：如果用户更改了下拉列表中选择的日期，那么该表应该通过Ajax重新填充该日期。
答案 0 :(得分：5)
使用ajax.data选项添加将发送到服务器的其他参数。
这样你就不需要重新初始化表，这使得代码变得非常简单。
例如：
$('#example').DataTable({
ajax: {
url: "/script.php",
data: function(d){
d.select1 = $('#example-select1').val();
d.select2 = $('#example-select2').val();
}
}
});
$('#example-select1, #example-select2').on('change', function(){
$('#example').DataTable().ajax.reload();
});
其中example-select1，example-select2是您的下拉列表的ID。
请参阅this jsFiddle以获取代码和演示。
使用clear()和rows.add()清除表格并为DataTables 1.10+添加新数据。对于DataTables 1.9，分别使用fnClearTable和fnAddData。
将数据添加到现有表格（适用于DataTables 1.10 +）：
$('#example').DataTable().clear();
$('#example').DataTable().rows.add(msg.data);
其中msg是一个保持服务器响应的变量。
使用bDestroy（对于DataTables 1.9）或destroy（对于DataTables 1.10+）选项来销毁与选择器匹配的任何现有表，并替换为新选项。
重新初始化表格（适用于DataTables 1.10 +）：
$('#example').DataTable( {
"destroy": true,
"data": msg.data,
"columns": [
{"title": "Description"},
{"title": "Amount" },
{"title": "Date" }
]
});
其中msg是一个保持服务器响应的变量。