jQuery DataTables – 无法重新初始化DataTable

我正在使用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> 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 s=new ArrayList(); if (user != null && user.getUser_token()!=null) { s = (ArrayList) 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> h=new HashMap<String, ArrayList>(); h.put("data", s); return h; } 

下面是我的Ajaxfunction

 $(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( '' ); 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：

该表应该位于stdata div中。

我怎样才能让它发挥作用？ 我也想要这样一种方式，即如果用户更改了下拉列表中选择的日期，那么该表应该通过Ajax重新填充该日期。

Answer 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。

有关代码和演示，请参阅此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是一个保持服务器响应的变量。