jQuery DataTables - 无法重新初始化 DataTable [英] jQuery DataTables - Cannot reinitialise DataTable
问题描述
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中制作报表页面以呈现报表.
通过 Jackson 消息转换器解析后，服务器返回以下对象.
<代码>{数据":[{"desc":"SUBWAY 00501197 BRONX NYUS",数量":"-"，日期":5.72"},{"desc":"纽约曼哈顿中城漫画",数量":"-"，日期":73.32"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"BIMG PRIMARY CARE NEW YORK NYUS",数量":"-"，日期":25.00"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"Walgreens Speci 205 8THNEW YORK NYUS",数量":"-"，日期":10.00"},{"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",数量":"-"，日期":9.99"},{"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",数量":"-"，日期":35.93"},{"desc":"SHUN FA RELAXING CENTE NEW YORK NYUS",数量":"-"，日期":20.00"},{"desc":"CHIPOTLE 0590 NEW YORK NYUS",数量":"-"，日期":9.00"},{"desc":"CHIPOTLE 0590 NEW YORK NYUS",数量":"-"，日期":9.00"},{"desc":"ALEX CLEANERS BRONX NYUS",数量":"-"，日期":58.95"},{"desc":"SUBWAY 00501197 BRONX NYUS",数量":"-"，日期":5.17"},{"desc":"PAYPAL *LAROMANAAPA 4029357733 CAUS",数量":"-"，日期":103.20"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",数量":"-"，日期":4.99"},{"desc":"GOOGLE *SGN Games GOOGLE.COM/CHCAUS",数量":"-"，日期":4.99"},{"desc":"LA ISLA RESTAURANT #2 NEW YORK NYUS",数量":"-"，日期":12.75"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"REDBOX *DVD RENTAL 866-733-2693 ILUS",数量":"-"，日期":7.62"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":3.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"},{"desc":"GOOGLE *PlayDog Soft GOOGLE.COM/CHCAUS",数量":"-"，日期":1.99"}]}现在我正在尝试将其传递给数据表，如下所示.但我收到一个错误.
$('#example').dataTable(data)但它给了我如下所示的错误:
<块引用>DataTables 警告:table id=example - 无法重新初始化 DataTable.有关此错误的详细信息，请参阅 https://datatables.net/manual/tech-notes/3.
呈现的表格也用数据代替了列名，看起来是错误的.
下面是我的控制器
@RequestMapping(value = "/getStmt", method = RequestMethod.GET)公共@ResponseBody HashMap>getStatement(@RequestParam(required = true) 字符串名称，@RequestParam(required = true) 字符串月份，HttpServletRequest 请求，模型模型){System.out.println(姓名+", "+月份+"");用户用户 = userDao.findUserByName(name);ArrayLists=new ArrayList();if (user != null && user.getUser_token()!=null) {s = (ArrayList) userDao.getUserSelectedStatement(user.getUser_token(), 07, 2015);}别的{UserStatement us =new UserStatement();us.setAmount("找不到用户的用户令牌");s.添加(我们)；}HashMap>h=new HashMap>();h.put("数据", s);返回 h;} 下面是我的 Ajax 函数
$(document).ready(function(){今天无功 = 新日期();var月=今天.getMonth();变量名称=测试"；$.ajax({类型:获取"，网址:getStmt.ajax"，数据:name="+name+"&month="+month,成功:功能(味精){$('#stdata').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');var data1 = JSON.stringify(msg);控制台日志(数据1)；控制台日志(数据1.数据)；console.log("数据保存:" + msg);$('#example').dataTable({aaData":数据，"aoColumns": [{"sTitle": "描述"},{"sTitle": "金额" },{"sTitle": "日期" }]});},错误:功能(味精){无功数据 = 味精；console.log("出现错误:" + msg);$('#stdata').dataTable({ajax":数据，列": [{ 标题描述" }，{ "title": "金额" },{标题":日期"}，{标题":余额"}]});}});});和 html:
<div id="stdata">表格应该位于 stdata div 内.
我怎样才能让它工作?我还希望这样一种方式，如果用户更改下拉列表中选择的日期，则应通过 Ajax 为该日期重新填充该表.
SOLUTION 1
使用 ajax.data 选项添加附加参数这将被发送到服务器.
这样你就不需要重新初始化表，这使得代码变得简单.
例如:
$('#example').DataTable({阿贾克斯:{网址:/script.php"，数据:函数(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.
有关代码和演示，请参阅此 jsFiddle.
解决方案 2
使用 clear() 和 rows.add() 清除表格并为 DataTables 1.10+ 添加新数据.对于 DataTables 1.9，使用 fnClearTable 和 fnAddData 分别.
要将数据添加到现有表格(适用于 DataTables 1.10+):
$('#example').DataTable().clear();$('#example').DataTable().rows.add(msg.data);其中 msg 是保存来自服务器的响应的变量.
解决方案 3
使用 bDestroy(对于 DataTables 1.9)或 destroy(对于 DataTables 1.10+)用于销毁与选择器匹配的任何现有表并替换为新选项.
重新初始化表格(对于 DataTables 1.10+):
$('#example').DataTable( {破坏":真的，数据":msg.data，列":[{标题":描述"}，{标题":金额"},{标题":日期"}]});其中 msg 是保存来自服务器的响应的变量.
I'm making a statements page in a spring 4.x application using jQuery DataTables to render the statements.
I have the following object returned by the server after parsing thru the Jackson message converter.
{
"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"
}
]
}
Now I'm trying to pass this to data table as follows. But I get an error.
$('#example').dataTable(data)
But it gives me an error shown below:
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/manual/tech-notes/3.
Also the table rendered has data in place of column names and looks just wrong.
Below is my controller
@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;
}
Below is my Ajax function
$(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" }
]
} );
}
});
});
and html:
<div class="panel-body">
<div id="stdata">
</div>
</div>
the table should sit inside stdata div.
How can I get this to work? I also want it in such a way that if a user changes the date selected in a drop-down list, the table should be repopulated thru Ajax for that date.
SOLUTION 1
Use ajax.data option to add additional parameters that would be sent to the server.
That way you don't need to re-initialize the table which makes the code much simple.
For example:
$('#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();
});
where example-select1, example-select2 are IDs of your drop-downs.
See this jsFiddle for code and demonstration.
SOLUTION 2
Use clear() along with rows.add() to clear the table and add new data for DataTables 1.10+. For DataTables 1.9, use fnClearTable and fnAddData respectively.
To add data to existing table (for DataTables 1.10+):
$('#example').DataTable().clear();
$('#example').DataTable().rows.add(msg.data);
where msg is a variable holding response from the server.
SOLUTION 3
Use bDestroy (for DataTables 1.9) or destroy (for DataTables 1.10+) options to destroy any existing table matching the selector and replace with the new options.
To reinitialize the table (for DataTables 1.10+):
$('#example').DataTable( {
"destroy": true,
"data": msg.data,
"columns": [
{"title": "Description"},
{"title": "Amount" },
{"title": "Date" }
]
});
where msg is a variable holding response from the server.
这篇关于jQuery DataTables - 无法重新初始化 DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
