jQuery DataTables - 无法重新初始化 DataTable
Posted
技术标签:
【中文标题】jQuery DataTables - 无法重新初始化 DataTable【英文标题】：jQuery DataTables - Cannot reinitialise DataTable 【发布时间】：2015-11-04 02:28:19 【问题描述】：我正在使用 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 为该日期重新填充表格。
【问题讨论】：
您是否检查了警报消息中提到的链接？ 嗯.. 是的，我做到了。也许我试图在数据表已经启动并导致消息之后启动它。但是数据没有被正确读取的问题仍然存在。它仍然呈现列的列数据 【参考方案1】：解决方案 1
使用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。
解决方案 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(
"destroy": true,
"data": msg.data,
"columns": [
"title": "Description",
"title": "Amount" ,
"title": "Date"
]
);
其中msg 是一个保存来自服务器的响应的变量。
【讨论】：
有没有一个例子可以指导我……使用添加和保存事件中新添加的行来更新服务器 @DJR，我刚刚重新阅读了您的问题，我认为有一个比尝试重新初始化表格更简单的解决方案，我将很快发布一个示例。 @DJR，刚刚为解决方案 #1 添加了一个示例，我建议将其用于提高性能和维护最少的代码。以上是关于jQuery DataTables - 无法重新初始化 DataTable的主要内容，如果未能解决你的问题，请参考以下文章
jQuery DataTables 行重新排序和 CoffeeScript
jquery-datatables-rails gem 在页面刷新之前无法正确显示
如何使用 Datatables Jquery 插件销毁表并使用新的更新数据重新初始化同一个表
DataTables 警告：table id=DataTables_Table_1 - 无法重新初始化 DataTable。不工作