title: Using Jquery Filter Table with CSHTML View
body: <p>I am trying to add a search feature to a table within a strongly typed view as a list type. Using this table I am trying to make the search work for the entire table meaning that is any row/ column can contain any keyword that a user enters and the table will show only the matching rows. I found this JQuery Filter Table JS that looks pretty good and simple but I cannot seem to get it working. The plugin can be found here <a href="http://sunnywalker.github.io/jQuery.FilterTable/" rel="nofollow">FilterTable Plugin</a>. I have tried putting the code in the doucment ready but it did not work. From what I understand from the example is the the plugin automatically creates the search bar but it does not seem to appear. Is there any issues that you see with my code?</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>@model IEnumerable&lt;ApIssues.Models.Issue&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  
  
  &lt;h2&gt;Search/Sort Options&lt;/h2&gt;
  
  &lt;h2&gt;A/P Issues&lt;/h2&gt;
  
  &lt;div class="issue-table"&gt;
      &lt;table id="data-table"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.IssueDate)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.InvoiceDate)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.AssignedEmployee)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.CcEmployee)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.Warehouse)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.PurchaseOrderNumber)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.FreightNumber)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.VendorName)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.RequiredCompleteDate)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.IssueType)
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.IssueDate)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.InvoiceDate)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.AssignedEmployee)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.CcEmployee)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Warehouse)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.PurchaseOrderNumber)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.FreightNumber)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.VendorName)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.RequiredCompleteDate)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.IssueType)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                      @Html.ActionLink("Details", "Issue", new { id = item.Id })
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('table').filterTable(); // apply filterTable to all tables on this page
          });
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Also, I am getting an error that says that says the filterTable() is undefined. And I have the correct mapping to the js file.</p>
  
  <p>Here is my rendered HTML page:</p>
  
  <pre><code>&lt;html lang="en" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"&gt;&lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Index - My ASP.NET MVC Application&lt;/title&gt;
          &lt;link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;link href="/Content/site.css" rel="stylesheet"&gt;
  
          &lt;script src="/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;&lt;/style&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p class="site-title"&gt;&lt;a href="/"&gt;Pacific Power Group&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="float-right"&gt;
                      &lt;section id="login"&gt;
                         Hello, &lt;span class="username"&gt;AARONJOHNSON-PC\Aaron Johnson&lt;/span&gt;!
                      &lt;/section&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div id="body"&gt;
  
              &lt;section class="content-wrapper main-content clear-fix"&gt;
  
  
  
  &lt;h2&gt;Search/Sort Options&lt;/h2&gt;
  
  &lt;h2&gt;A/P Issues&lt;/h2&gt;
  
  &lt;div class="issue-table"&gt;
      &lt;table id="data-table"&gt;
          &lt;tbody&gt;&lt;tr&gt;
              &lt;th&gt;
                  Issue Date
              &lt;/th&gt;
              &lt;th&gt;
                  Invoice Date
              &lt;/th&gt;
              &lt;th&gt;
                  Assigned By
              &lt;/th&gt;
              &lt;th&gt;
                  CC
              &lt;/th&gt;
              &lt;th&gt;
                  Warehouse
              &lt;/th&gt;
              &lt;th&gt;
                  PO #
              &lt;/th&gt;
              &lt;th&gt;
                  Freight #
              &lt;/th&gt;
              &lt;th&gt;
                  Vendor Name
              &lt;/th&gt;
              &lt;th&gt;
                  Req. Complete Date
              &lt;/th&gt;
              &lt;th&gt;
                  Issue Type
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      12/1/1991 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      12/2/1991 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      Bob
                  &lt;/td&gt;
                  &lt;td&gt;
                      Michael
                  &lt;/td&gt;
                  &lt;td&gt;
                      ANCH
                  &lt;/td&gt;
                  &lt;td&gt;
                      123
                  &lt;/td&gt;
                  &lt;td&gt;
                      1341
                  &lt;/td&gt;
                  &lt;td&gt;
                      Fifa
                  &lt;/td&gt;
                  &lt;td&gt;
                      12/1/2002 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      Basketball
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;a href="/apissues/Edit/1"&gt;Edit&lt;/a&gt; |
                      &lt;a href="/apissues/Issue/1"&gt;Details&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      12/4/2014 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      12/15/2014 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      Rod
                  &lt;/td&gt;
                  &lt;td&gt;
                      Kevin
                  &lt;/td&gt;
                  &lt;td&gt;
                      PTLD
                  &lt;/td&gt;
                  &lt;td&gt;
                      234124
                  &lt;/td&gt;
                  &lt;td&gt;
                      1235
                  &lt;/td&gt;
                  &lt;td&gt;
                      Golf and Things
                  &lt;/td&gt;
                  &lt;td&gt;
                      12/16/2014 12:00:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
                      Serious
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;a href="/apissues/Edit/3"&gt;Edit&lt;/a&gt; |
                      &lt;a href="/apissues/Issue/3"&gt;Details&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
      &lt;/tbody&gt;&lt;/table&gt;
  &lt;/div&gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('table').filterTable(); // apply filterTable to all tables on this page
          });
      &lt;/script&gt;
  
  
  
              &lt;/section&gt;
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p&gt;© 2014 - My ASP.NET MVC Application&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
  
          &lt;script src="/Scripts/jquery-1.8.2.js"&gt;&lt;/script&gt;
  
  
  
  &lt;!-- Visual Studio Browser Link --&gt;
  &lt;script type="application/json" id="__browserLink_initializationData"&gt;
      {"appName":"Chrome","requestId":"4b661357b7024127b7d0668c75d0b699"}
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:57537/5dde797bc9ee4daf89f7c7b54c415d49/browserLink" async="async"&gt;&lt;/script&gt;
  &lt;!-- End Browser Link --&gt;
  
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>