Javascript 在web网格表上进行实时搜索，分页仅对实际页面起作用

我想在具有分页功能的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);*/
    });
});

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
控制台日志（过滤器）；
//循环遍历表的每一行
$（“表tr”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
/*var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）*/
});
});

我的html页面：

<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 />

请参阅下面的可用书籍列表。




@{
WebGrid obj=新的WebGrid（模型，行页面：5）；
}
@对象表（htmlAttributes:新）
{
id=“TableCurrentRendered”，
@class=“表”
},
标题样式：“webgrid标题”，
页脚样式：“webgrid页脚”，
交替行样式：“webgrid交替行”，
行样式：“webgrid行样式”，
列：obj.columns(
对象列（“标题”，标题：“标题”），
对象列（“作者”，标题：“作者”），
对象列（“可用”，标题：“可用”，canSort:false），
对象列（标题：“租金”，格式：@Rent it）
))
@对象寻呼机（模式：WebGridPagerModes.All）

你知道怎么做吗

HTML：

<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);
    }

public ActionResult SearchBooks（）
{
var listBook=datamanager.GetAllBooks（）；
List listViewBook=新建列表（）；
foreach（列表簿中的b册）
{
ViewBook ViewBook=新建ViewBook（）；
viewBook.BookID=b.BookID；
viewBook.Title=b.Title；
viewBook.Author=b.Author；
如果（b.正确）
{
viewBook.available=“否”；
}
其他的
{
viewBook.available=“是”；
}
listViewBook.Add（viewBook）；
}
返回视图（listViewBook）；
}

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

var data=@Html.Raw（Json.Encode（Model））

但是，当我这样做时：

$（数据）。每个（函数（）{

要循环遍历每个数据元素，我得到以下错误：

无法使用“in”运算符在未定义中搜索“opacity”

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

看来你有一个“模型”变量保存数据。也许您应该考虑直接过滤这个模型中的数据，并将过滤的模型传递给WebGrand。问题是，我如何理解它，即在获取过滤数据之前，您试图获取已经呈现的值，而不是考虑整个数据集合。

JavaScript

       $("#filter").keyup(function () {  
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",            
        url: 'Search?q='+$("#filter").val(),
        success:
            function (result) {                  
                $("#tableCurrentRented tbody").empty();
                $.each(result.Books, function (index, item) {
                    var cls=(index%2==0)?"webgrid-row-style":"webgrid-alternating-row";
                    var html = ' <tr class="'+cls+'">'+
        '<td>'+item.Title  +'</td>'+
        '<td>'+item.Author  +'</td>'+
        '<td>'+item.Avaible  +'</td>'+
       ' <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-id="'+item.BookID +'" data-title="'+item.Title+'">'+item. +'</button></td></tr>';
                    $("#tableCurrentRented tbody").append(html);
                });                   
            },
        error: function (xhr, status, err) {          
        }
    });
});

$（“#过滤器”）.keyup（函数（）{
$.ajax({
键入：“获取”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
url:'Search？q='+$（“#过滤器”）.val（），
成功：
函数（结果）{
$（“#tabletbody”）.empty（）；
$.each（result.Books，函数（索引，项）{
变量cls=（索引%2==0）？“webgrid行样式”：“webgrid交替行”；
var html=''+
''+项目.标题+''+
''+项目.作者+''+
''+项。可用+''项+
“+”项；
$（“#tabletbody”）.append（html）；
});                   
},
错误：函数（xhr、状态、错误）{
}
});
});

添加在控制器中搜索的新方法

public ActionResult Search(string q)
    {
        var listBook = datamanager.GetAllBooks().Where(X=> X.Title.Contains(q)).ToList();
        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 Json(new { Books = listViewBook }, JsonRequestBehavior.AllowGet);
    }

公共操作结果搜索（字符串q）
{
var listBook=datamanager.GetAllBooks（）.Where（X=>X.Title.Contains（q））.ToList（）；
List listViewBook=新建列表（）；
foreach（列表簿中的b册）
{
ViewBook ViewBook=新建ViewBook（）；
viewBook.BookID=b.BookID；
viewBook.Title=b.Title；
viewBook.Author=b.Author；
如果（b.正确）
{
viewBook.available=“否”；
}
其他的
{
viewBook.available=“是”；
}
listViewBook.Add（viewBook）；
}
返回Json（new{Books=listViewBook}，JsonRequestBehavior.AllowGet）；
}

你能提供呈现的html吗？@Rakin:刚从呈现的html中添加了它，看起来它只显示分页的数据。因此，当客户端应用的筛选器仅反映客户端可用的数据时，只需调用ajax函数即可检索已过滤的数据data@Rakin：我怎么能做到呢