数据表搜索栏被部分视图弄糊涂了？答案

【问题标题】：Datatables search bar confused by partial view?数据表搜索栏被部分视图弄糊涂了？
【发布时间】：2014-08-31 23:11:51
【问题描述】：

我在我的 MVC 应用程序中使用数据表 (http://www.datatables.net)。所有列的一切都按预期工作（分页、排序、显示不同数量的元素等）除了搜索栏。当我为每列添加单独的搜索栏时，它们都可以正常工作。

我有 9 列数据。按预期搜索前 5 列，但是当我尝试根据最后 4 列中的数据进行过滤时，我得到不正确的结果（通常没有过滤）。

我相信问题在于我的片面观点。我有一个表本身的部分，以及另一系列用作编辑窗口的部分（每个表条目一个）。编辑窗口包含下拉菜单，其中包含对应字段的所有可能值。我相信这些编辑部分是阻碍过滤的原因。也许搜索功能正在查看下拉列表中的所有值，而不仅仅是下拉列表中的选定值（我不完全确定搜索的操作方式）。 我怀疑这是因为当我删除部分编辑时，搜索功能正常工作。

这是我的表格的部分视图：

<div id="theLog" style="width:100%; float:left; display:block">
<table class="table" id="logTable">
    @{
        var rowColor = "F2F2F2";
    }

    <thead>
        <tr style="background-color:#F2F2F2;">
            <th>
                Number
            </th>
            <th>
                Logged
            </th>
            <th>
                Occured
            </th>
            <th>
                Time
            </th>
            <th>
                Cleared
            </th>
            <th>
                Description
            </th>
            <th>
                Location
            </th>
            <th>
                Dispatcher
            </th>
            <th>
                Officer
            </th>
            <th>
                Options
            </th>
        </tr>

    </thead>
    <tbody>

        @foreach (var item in Model)
        {
            <tr style="background-color:@rowColor;">
                <td>
                    @Html.DisplayFor(modelItem => item.ReportNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreateDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IncidentDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IncidentTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TimeCleared)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CallType.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CallLocation.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Dispatcher.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.OfficerResponding.FullNameNOID)
                </td>
                <td>
                    <button class="Edit btn btn-default" value="@item.IncidentID"  style="width: auto; padding: 4px; "><i class="glyphicon glyphicon-pencil"></i></button> 
                    <button class="Delete btn btn-default" value="@item.IncidentID" style="width: auto; float: left; padding: 4px"><i class="glyphicon glyphicon-remove"></i></button> 
                    <div id="editForm_@item.IncidentID" style="display: none; width: 200px" class="OfficerBox">
                        @Html.Partial("_EditIncidentPartial", item)
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

这是编辑部分中形成下拉菜单的部分

<div style="float: left; border-left: 1px solid #eeeeee; padding-left: 35px; width: 394px; ">
        <div class="incidentCreateFormLeft">
            <label>Call Type</label>
            <br />
            @Html.DropDownListFor(model => model.CallTypeID, (SelectList)ViewBag.CallTypeIDList, "", new { @style = "width:394px;" })
        </div>

        <div style="margin-left: -15px">
            <label>Location</label>
            <br />
            @Html.DropDownListFor(model => model.CallLocationID, (SelectList)ViewBag.CallLocationIDList, "", new { @style = "width:394px;" })
        </div>

        <div style="margin-left: -15px">
            <label>Dispatcher</label>
            <br />
            @Html.DropDownListFor(model => model.DispatcherID, (SelectList)ViewBag.DispatcherIDList, "", new { @style = "width:394px;" })
        </div>

        <div style="margin-left: -15px">
            <label>Responding Officer</label>
            <br />
            @Html.DropDownListFor(model => model.OfficerRespondingID, (SelectList)ViewBag.OfficerRespondingIDList, "", new { @style = "width:394px;" })
        </div>

        <div style="margin-left: -15px; float: right">
            <br />
            <input type="submit" value="Submit" class="btn btn-success"/>
            <input type="button" value="Cancel" id="CloseBtn" class="btn btn-default" />
        </div>
    </div>

这里是 Datatable 脚本：

$('#logTable').dataTable();

我表中的所有其他内容以及我的其他脚本都可以正常工作。没有根据我最后 4 列过滤的搜索栏是我唯一的问题。我有其他与数据表无关的脚本，但当它们全部删除后问题仍然存在。

【问题讨论】：

我认为外键不会有问题，您是否尝试过将一些随机字符串放入不能用作测试的列中？我假设您也使用了零配置的数据表，您是否尝试过使用单个列过滤器来查看会发生什么？ datatables.net/examples/api/multi_filter.html
我添加了各个列过滤器，它们可以正常工作。但是，顶部的搜索栏没有。

标签： jquery model-view-controller datatable filtering

【解决方案1】：

我通过禁用选项列上的搜索解决了我的问题

{ "bSearchable": false, "aTargets": [9]}

事实证明，问题是由我的选项列引起的，该列在其 HTML 中包含我所有可能的数据（以下拉列表的形式）。由于我的所有行在其选项字段中都有相同的按钮，因此所有行都被检测为他搜索过关键字（如果该关键字在我的下拉菜单中），称为“全有或全无”搜索。

【讨论】：