MVC：数据表的下拉过滤器干扰 UIHints答案

【问题标题】：MVC: Dropdown Filter of Datatable interferes with UIHintsMVC：数据表的下拉过滤器干扰 UIHints
【发布时间】：2021-02-13 00:19:31
【问题描述】：

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

这也适用于我尝试使用 UIHints 设置输出样式的那一刻。我认为问题在于我的 javascript 代码会查找旧的单元格内容，而实际的单元格内容已被我的 UIHint 更改。让我的下拉过滤器正常工作的最佳方法是什么？

提前谢谢你！

这是我的代码的一部分：

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

    });
});

【问题讨论】：

标签： javascript jquery asp.net-mvc datatables

【解决方案1】：

好的，我发现我的错误：

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

然后它就可以正常工作了！

【讨论】：