javascript - MVC : Dropdown Filter of Datatable interferes with UIHints

Question

我尝试实现下拉过滤器来过滤我的数据表，如下所示: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( View )

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

    });
});

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

然后就可以正常工作了!