Ajax表不会使用Datatable插件过滤搜索

Question

我有一个ajax调用来创建一个带有数据的HTML，然后调用.DataTable到那个HTML表。但是，当试图让它有多个过滤器（每列）时，搜索功能似乎不起作用，当你输入某些内容时，它只返回任何内容。以下是代码

 $.ajax({
        type: "GET",
        url: "WCF/WicsReports.svc/userUsageReport?unit=" + unitType + "&startDate=01/09/2014&endDate=01/01/2015&tradingparty=" + tradingPartyVal($("#ctl00_ContentPlaceHolder1_CsUsageLVIUser_ddlTradingParties")),
        contentType: "application/json", // content type sent to server
        success: function (result) {
            $('.divLVIUserReportData').html(result.UserUsageReportResult);
            $('.loading').hide();

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

            // DataTable
            var table = $('#lviDetails').DataTable({
                //"bFilter": false,
                "bPaginate": true,
                "bLengthChange": false,
                "paging": 50,
                "pagingType": "simple",
                "aaSorting": [[1, "asc"]],

                initComplete: function () {
                    //$("#lviDetails_filter").hide();

                    var r = $('#lviDetails tfoot tr');
                    r.find('th').each(function () {
                        $(this).css('padding', 8);
                    });
                    $('#lviDetails thead').append(r);
                    $('#search_0').css('text-align', 'center');
                },
            });

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

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

        },
        error: function (result) {
            $('.divLVIUserReportData').html("<div class='error_messages'>ERROR: The Ajax service call failed: " + result.status + " " + result.statusText + "</div>");
            $('.loading').hide();
        },
        beforeSend: function () {
            $('.loading').show();
        },
        afterSend: function () {

        }
    });

任何帮助如何解决这个问题？