在网络网格 table 上实时搜索，分页仅在实际页面上工作

Question

我想在具有分页功能的网络网格 table 上实施实时搜索。但是，我的搜索仅显示实际页面中存在的元素。我希望我的搜索功能对 table 中存在的所有元素进行搜索。不仅是实际显示的那些。下面是我的搜索脚本：

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

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

知道怎么做吗？

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

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

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

但是，当我这样做时：

$(data).each(function () {

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

Cannot use 'in' operator to search for 'opacity' in undefined

知道如何解决这个问题吗？

Answer 1

您似乎有一个 "Model" 变量保存数据。或许你应该考虑直接过滤这个Model中的数据，将过滤后的Model传给webgrid。这个问题，我的理解是，你试图获取已经呈现的值，而不是在呈现过滤后的数据之前考虑整个数据集合。

Answer 2

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

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

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

在网络网格 table 上实时搜索，分页仅在实际页面上工作

Live search on a web grid table with pagination working only on the actual page

javascript

pagination

webgrid