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警告: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>

桌子应该坐在stdatadiv 里面.

我怎样才能让它发挥作用？我也想要这样一种方式:如果用户更改了下拉列表中选择的日期,那么该表应该通过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()清表和数据表添加新的数据1.10+.对于DataTables 1.9,分别使用fnClearTable和fnAddData.

要将数据添加到现有表(对于DataTables 1.10+):

$('#example').DataTable().clear();
$('#example').DataTable().rows.add(msg.data);

where 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" }
   ]
});

where msg是来自服务器的变量保持响应.