Question

我正在尝试将搜索功能添加到强类型视图中的表作为列表类型。使用此表我尝试使搜索工作整个表，这意味着任何行/列可以包含用户输入的任何关键字，表将只显示匹配的行。我发现这个JQuery Filter Table JS看起来非常简单但我似乎无法让它工作。插件可以在FilterTable Plugin找到。我已经尝试将代码放入doucment准备好但它没有用。根据我从示例中理解的是，插件会自动创建搜索栏，但似乎没有出现。您在我的代码中看到了任何问题吗？

这就是我所拥有的：

@model IEnumerable<ApIssues.Models.Issue>

@{
    ViewBag.Title = "Index";
}


<h2>Search/Sort Options</h2>

<h2>A/P Issues</h2>

<div class="issue-table">
    <table id="data-table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.IssueDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.InvoiceDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AssignedEmployee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CcEmployee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Warehouse)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PurchaseOrderNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FreightNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.VendorName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RequiredCompleteDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IssueType)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.IssueDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AssignedEmployee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CcEmployee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Warehouse)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PurchaseOrderNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FreightNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.VendorName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RequiredCompleteDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IssueType)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Issue", new { id = item.Id })
                </td>
            </tr>
        }

    </table>
</div>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('table').filterTable(); // apply filterTable to all tables on this page
        });
    </script>
</head>

另外，我收到一条错误消息，说明filterTable（）未定义。我有正确的映射到js文件。

这是我呈现的HTML页面：

<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"><head>
        <meta charset="utf-8">
        <title>Index - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <meta name="viewport" content="width=device-width">
        <link href="/Content/site.css" rel="stylesheet">

        <script src="/Scripts/modernizr-2.6.2.js"></script>

    <style type="text/css"></style></head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">Pacific Power Group</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                       Hello, <span class="username">AARONJOHNSON-PC\Aaron Johnson</span>!
                    </section>

                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">



<h2>Search/Sort Options</h2>

<h2>A/P Issues</h2>

<div class="issue-table">
    <table id="data-table">
        <tbody><tr>
            <th>
                Issue Date
            </th>
            <th>
                Invoice Date
            </th>
            <th>
                Assigned By
            </th>
            <th>
                CC
            </th>
            <th>
                Warehouse
            </th>
            <th>
                PO #
            </th>
            <th>
                Freight #
            </th>
            <th>
                Vendor Name
            </th>
            <th>
                Req. Complete Date
            </th>
            <th>
                Issue Type
            </th>
            <th></th>
        </tr>

            <tr>
                <td>
                    12/1/1991 12:00:00 AM
                </td>
                <td>
                    12/2/1991 12:00:00 AM
                </td>
                <td>
                    Bob
                </td>
                <td>
                    Michael
                </td>
                <td>
                    ANCH
                </td>
                <td>
                    123
                </td>
                <td>
                    1341
                </td>
                <td>
                    Fifa
                </td>
                <td>
                    12/1/2002 12:00:00 AM
                </td>
                <td>
                    Basketball
                </td>
                <td>
                    <a href="/apissues/Edit/1">Edit</a> |
                    <a href="/apissues/Issue/1">Details</a>
                </td>
            </tr>
            <tr>
                <td>
                    12/4/2014 12:00:00 AM
                </td>
                <td>
                    12/15/2014 12:00:00 AM
                </td>
                <td>
                    Rod
                </td>
                <td>
                    Kevin
                </td>
                <td>
                    PTLD
                </td>
                <td>
                    234124
                </td>
                <td>
                    1235
                </td>
                <td>
                    Golf and Things
                </td>
                <td>
                    12/16/2014 12:00:00 AM
                </td>
                <td>
                    Serious
                </td>
                <td>
                    <a href="/apissues/Edit/3">Edit</a> |
                    <a href="/apissues/Issue/3">Details</a>
                </td>
            </tr>

    </tbody></table>
</div>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('table').filterTable(); // apply filterTable to all tables on this page
        });
    </script>



            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© 2014 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.8.2.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"4b661357b7024127b7d0668c75d0b699"}
</script>
<script type="text/javascript" src="http://localhost:57537/5dde797bc9ee4daf89f7c7b54c415d49/browserLink" async="async"></script>
<!-- End Browser Link -->



</body></html>

Answer 1

看起来你的东西中有一些糟糕的JavaScript映射。

我在我的示例中使用了te path到预期的javscript文件。请在呈现的HTML中验证您的代码指向正确的路径

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>

我冒昧地从你的代码中准备了一组渲染的HTML并把它放在一个小提琴里。在此处查看呈现的HTML的工作版本：的 http://jsfiddle.net/GUh2x/

*删除Jquery 1.8 *

您需要删除此内容，因为您已在代码中包含较新版本的jquery。在页脚下面再次添加它会覆盖并弄乱你的jquery依赖对象关系。

Answer 2

如果您使用默认 MVC 模板，您将在 _Layout 页面的页脚中找到 jQuery 引用。您需要在标题中使用 .filterTable() 才能工作。因此：

确保您的表中有超过 8 个项目。
在 _Layout.cshtml 页面的标题中呈现 jQuery 引用

两者都是 Ash 推荐的。

使用带有CSHTML视图的Jquery过滤表

2 个答案: