在网页网格表上进行实时搜索，分页仅在实际页面上工作

我想在一个有分页的web网格表上实现一个实时搜索。但是，我的搜索只显示实际页面中存在的元素。我想让搜索函数对表中所有元素进行搜索。不仅仅是实际展示的那些。下面是我的搜索脚本:

<script type="text/javascript">
$(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")) < 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);*/
    });
});

my HTML page:

<div>
<div id="homeMessage">
    Please see below the list of books available.
</div>
<br />
<div id="divCurrentRented">
    <form id="live-search" action="" class="styled" method="post">
        <fieldset>
            <input type="text" class="form-control" id="filter" value="" placeholder="Search by title or author..."/>
            <span id="filter-count"></span>
        </fieldset>
    </form>
</div>
<br />
<div id="divCurrentRented">
@{
    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:@<button type="button" class="btn btn-default">Rent it</button>)
))
</div>
<div style="text-align:right">
    @obj.Pager(mode: WebGridPagerModes.All)
</div>
<br />

你知道怎么做吗?

<table id="tableCurrentRented" class="table">
<thead>
    <tr class="webgrid-header">
        <th scope="col">
<a href="/AuthenticatedUser/SearchBooks?sort=Title&amp;sortdir=ASC">Title</a>            </th>
            <th scope="col">
<a href="/AuthenticatedUser/SearchBooks?sort=Author&amp;sortdir=ASC">Author</a>            </th>
            <th scope="col">
Available            </th>
            <th scope="col">
Rent            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="webgrid-row-style">
            <td>Le Bossu de Notre Dame</td>
            <td>Victor Hugo</td>
            <td>Yes</td>
            <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="9" data-title="Le Bossu de Notre Dame">Yes</button></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td>Oliver Twist</td>
            <td>Charles Dickens</td>
            <td>Yes</td>
            <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="1" data-title="Oliver Twist">Yes</button></td>
        </tr>
        <tr class="webgrid-row-style">
            <td>Pride and Prejudice</td>
            <td>Jane Austen</td>
            <td>Yes</td>
            <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="5" data-title="Pride and Prejudice">Yes</button></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td>Sense and Sensibility</td>
            <td>Jane Austen</td>
            <td>Yes</td>
            <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="6" data-title="Sense and Sensibility">Yes</button></td>
        </tr>
        <tr class="webgrid-row-style">
            <td>The Mayor of Casterbridge</td>
            <td>Thomas Hardy</td>
            <td>Yes</td>
            <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="3" data-title="The Mayor of Casterbridge">Yes</button></td>
        </tr>
    </tbody>
    </table>

控制器方法:

       public ActionResult SearchBooks()
    {
        var listBook = datamanager.GetAllBooks();
        List<ViewBook> listViewBook = new List<ViewBook>();
        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);
    }

我已经成功地将列表的所有模型传递给javascript:

var data = @Html.Raw(Json.Encode(Model));

但是，当我这样做时:

$(数据)。Each (function () {

循环遍历数据的每个元素，我得到这个错误:

不能使用'in'运算符搜索未定义的'不透明度'

你知道怎么解决这个问题吗?