MVC：数据表的下拉筛选器会干扰UIHints

如何解决MVC：数据表的下拉筛选器会干扰UIHints

我试图实现一个下拉过滤器来过滤我的数据表，例如：Individual column searching (select inputs)。

这也适用于当我尝试使用UIHints设置输出样式的时候。我认为问题是我的JavaScript代码查找的是旧单元格内容，而实际的单元格内容已由UIHint更改。使我的Drowpdown过滤器始终正常工作的最佳方法是什么？

提前谢谢！

这是我的代码的一部分：

Status.cshtml （显示状态模板）

@model short?

@if (Model == 0)
{
    <b>Not Set</b>
}
else if (Model == 1)
{
    <b>Created</b>
}
else if (Model == 2)
{
    <b>Approved</b>
}
else if (Model == 3)
{
    <b>Done</b>
}

Index.cshtml （查看）

@model IEnumerable<data>

<h2>Data</h2>

    <table class="display" id="db_table" style="width:100%">
        <thead>
            <tr>
                <th>
                    @Html.displayNameFor(model => model.month)
                </th>
                <th>
                    @Html.displayNameFor(model => model.year)
                </th>
                <th>
                    @Html.displayNameFor(model => model.country)
                </th>
                <th>
                    @Html.displayNameFor(model => model.status)
                </th>
            </tr>
        </thead>
        <tbody>
            @for (var i = 1; i < Model.Count(); i++)
            {
                <tr>
                    <td>
                        @Html.displayFor(modelItem => Model.ElementAt(i).month)
                    </td>
                    <td>
                        @Html.displayFor(modelItem => Model.ElementAt(i).year)
                    </td>
                    <td>
                        @Html.displayFor(modelItem => Model.ElementAt(i).country)
                    </td>
                    <td>
                        @Html.displayFor(modelItem => Model.ElementAt(i).status)
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
    @section scripts
    {
        <script src="~/Scripts/Custom/datatable.js"></script>
    }

datatable.js

$(document).ready(function () {

    $('#db_table').DataTable({
        ordering: false,paging: false,lengthChange: false,initComplete: function () {
            this.api().columns(3).every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.header()))
                    .on('change',function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '',true,false)
                            .draw();
                    });

                column.data().unique().sort().each(function (d,j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }

    });
});

解决方法

好的，我发现了我的错误：

UIHints使用不同的样式标签编辑了单元格内容。例如，单元格内容text变为粗体，之后看起来像<b>text</b>。这意味着我的JavaScript过滤功能正在寻找text，而实际上这些单元格看起来像<b>text</b>。

为了绕过此行为，我创建了一个javascript函数，该函数删除了html标签：

function stripString(str) {
    return str.replace(/(<([^>]+)>)/gi,"");
}

并将其用于输入值：

var val = stripString($.fn.dataTable.util.escapeRegex($(this).val()));

然后就可以了！