DataTable.Net库不呈现Filter

Question

我正在尝试在DataTable.net库上呈现的报表的所有列上实现Filering。

使用的脚本是

  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" media="screen" />

数据以JSON

传递

Document.Ready Function

$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#preview-table tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

// DataTable
var table = $('#preview-table').DataTable();

// Apply the search
table.columns().every(function () {
    var that = this;

    $('input', this.footer()).on('keyup change', function ()
    {
        debugger;
        alert(that)
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
  });
});

代码

 $('#preview-table').dataTable({
                        "bProcessing": true,
                        "aaData": response.Records,// <-- your array of objects
                        "aoColumns": [
                            { "mData": "Year" }, // <-- which values to use inside object
                            { "mData": "TradeFlowCode" },
                            { "mData": "ReporterCode" },
                            { "mData": "PartnerCode" },
                            { "mData": "CommodityCode" },
                            { "mData": "TradeValue" },
                            { "mData": "TradeValue" }
                        ],
                        columnDefs:
                            [
                            //Formatting Trade value (Currency )
                            {
                            "targets": 5,//index of column starting from 0
                            "data": "TradeValue", //this name should exist in your JSON response
                            "render": function (data)
                                    {
                                return '&nbsp;<span class="numericCol label label-info text-left">$ ' + UpdateComma(data) + '</span>'+
                                         "<span class='spnDetails'></span><span class='spnTooltip1 hidden'><strong>Most Light-weight Tooltip</strong><br />This is the easy-to-use Tooltip driven purely by CSS Detail View.</span>" ;
                            }
                            },
                            //Splitting Commodity Code and Description
                            {
                                 "targets": 4,//index of column starting from 0
                                 "data": "CommodityCode", //this name should exist in your JSON response
                                 "render": function (data)
                                 {
                                     entry = data.split('|');

                                     return '<abbr title="' + entry[1] + '">' + entry[0] + '</abbr>';
                                 }
                             }
                          ],
                        aLengthMenu: [
                                       [25, 50, 100, 200, -1],
                                       [25, 50, 100, 200, "All"]
                                    ],
                        iDisplayLength: 25,

                    destroy: false,
                    });

使用ajax jquery函数

填充

response.Records

但是Filter不起作用，也没有在控制台上出现任何错误。