jQuery DataTables - 无法重新初始化 DataTable

Question

我正在使用 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 warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/manual/tech-notes/3.

呈现的表格也用数据代替了列名，看起来完全错误。

下面是我的 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;
    }

下面是我的 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 重新填充该日期的表。

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。

参见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 是保存来自服务器的响应的变量。