title: Live search on a web grid table with pagination working only on the actual page
body: <p>I want to implement a live search on a web grid table which has pagination.  However, my search only shows elements which are present in the actual page.  I want my search function to do a search on all the element present in the table. Not only the ones actually displayed. Below is my search script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("#filter").keyup(function () {
  
          // Retrieve the input field text and reset the count to zero
          var filter = $(this).val(), count = 0;
          console.log(filter);
  
          // Loop through each row of the table
          $("table tr").each(function () {
  
              // If the list item does not contain the text phrase fade it out
              if ($(this).text().search(new RegExp(filter, "i")) &lt; 0) {
                  $(this).fadeOut();
  
                  // Show the list item if the phrase matches and increase the count by 1
              } else {
                  $(this).show();
                  count++;
              }
          });
          /* var numberItems = count;
          $("#filter-count").text("Number of Comments = "+count);*/
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>my html page:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div id="homeMessage"&gt;
      Please see below the list of books available.
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="divCurrentRented"&gt;
      &lt;form id="live-search" action="" class="styled" method="post"&gt;
          &lt;fieldset&gt;
              &lt;input type="text" class="form-control" id="filter" value="" placeholder="Search by title or author..."/&gt;
              &lt;span id="filter-count"&gt;&lt;/span&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="divCurrentRented"&gt;
  @{
      WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
  }
  @obj.Table(htmlAttributes: new
  {
      id="tableCurrentRented",
      @class = "table"
  },
  headerStyle: "webgrid-header",
  footerStyle: "webgrid-footer",
  alternatingRowStyle: "webgrid-alternating-row",
  rowStyle: "webgrid-row-style",
  columns: obj.Columns(
      obj.Column("Title", header: "Title"),
      obj.Column("Author", header: "Author"),
      obj.Column("Avaible", header: "Available", canSort:false),
      obj.Column(header: "Rent", format:@&lt;button type="button" class="btn btn-default"&gt;Rent it&lt;/button&gt;)
  ))
  &lt;/div&gt;
  
  &lt;div style="text-align:right"&gt;
      @obj.Pager(mode: WebGridPagerModes.All)
  &lt;/div&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any idea of  how to do this?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;table id="tableCurrentRented" class="table"&gt;
  &lt;thead&gt;
      &lt;tr class="webgrid-header"&gt;
          &lt;th scope="col"&gt;
  &lt;a href="/AuthenticatedUser/SearchBooks?sort=Title&amp;amp;sortdir=ASC"&gt;Title&lt;/a&gt;            &lt;/th&gt;
              &lt;th scope="col"&gt;
  &lt;a href="/AuthenticatedUser/SearchBooks?sort=Author&amp;amp;sortdir=ASC"&gt;Author&lt;/a&gt;            &lt;/th&gt;
              &lt;th scope="col"&gt;
  Available            &lt;/th&gt;
              &lt;th scope="col"&gt;
  Rent            &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="webgrid-row-style"&gt;
              &lt;td&gt;Le Bossu de Notre Dame&lt;/td&gt;
              &lt;td&gt;Victor Hugo&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="9" data-title="Le Bossu de Notre Dame"&gt;Yes&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="webgrid-alternating-row"&gt;
              &lt;td&gt;Oliver Twist&lt;/td&gt;
              &lt;td&gt;Charles Dickens&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="1" data-title="Oliver Twist"&gt;Yes&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="webgrid-row-style"&gt;
              &lt;td&gt;Pride and Prejudice&lt;/td&gt;
              &lt;td&gt;Jane Austen&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="5" data-title="Pride and Prejudice"&gt;Yes&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="webgrid-alternating-row"&gt;
              &lt;td&gt;Sense and Sensibility&lt;/td&gt;
              &lt;td&gt;Jane Austen&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="6" data-title="Sense and Sensibility"&gt;Yes&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="webgrid-row-style"&gt;
              &lt;td&gt;The Mayor of Casterbridge&lt;/td&gt;
              &lt;td&gt;Thomas Hardy&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="3" data-title="The Mayor of Casterbridge"&gt;Yes&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>My controller method:</p>
  
  <pre><code>       public ActionResult SearchBooks()
      {
          var listBook = datamanager.GetAllBooks();
          List&lt;ViewBook&gt; listViewBook = new List&lt;ViewBook&gt;();
          foreach (Book b in listBook)
          {
              ViewBook viewBook = new ViewBook();
              viewBook.BookID = b.BookId;
              viewBook.Title = b.Title;
              viewBook.Author = b.Author;
              if (b.Rented ?? true)
              {
                  viewBook.Avaible = "No";
              }
              else
              {
                  viewBook.Avaible = "Yes";
              }
              listViewBook.Add(viewBook);
          }
          return View(listViewBook);
      }
  </code></pre>
  
  <p>I have succeeded in passing all the models of my list to the javascript:</p>
  
  <blockquote>
    <p>var data = @Html.Raw(Json.Encode(Model));</p>
  </blockquote>
  
  <p>However, when I do this:</p>
  
  <blockquote>
    <p>$(data).each(function () {</p>
  </blockquote>
  
  <p>to loop through each element of data, I get this error:</p>
  
  <blockquote>
    <p>Cannot use 'in' operator to search for 'opacity' in undefined</p>
  </blockquote>
  
  <p>Any idea how I can solve this?</p>