title: Ajax table wont filter searches with Datatable pluggin
body: <p>I have a ajax call to create a HTML with data and then call .DataTable to that HTML table. However when trying to make it have multiple filters (each column) the search function doesn't seem to work and when you type in something it just returns nothing. Below is the code</p>
  
  <pre><code> $.ajax({
          type: "GET",
          url: "WCF/WicsReports.svc/userUsageReport?unit=" + unitType + "&amp;startDate=01/09/2014&amp;endDate=01/01/2015&amp;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('&lt;input type="text" placeholder="Search ' + title + '" /&gt;');
              });
  
              // 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("&lt;div class='error_messages'&gt;ERROR: The Ajax service call failed: " + result.status + " " + result.statusText + "&lt;/div&gt;");
              $('.loading').hide();
          },
          beforeSend: function () {
              $('.loading').show();
          },
          afterSend: function () {
  
          }
      });
  </code></pre>
  
  <p>Any help how to fix this??</p>