MVC: Dropdown Filter of Datatable interferes with UIHints

I tried to implement a Dropdown Filter to filter my Datatable like here: Individual column searching (select inputs).

This also works up to the moment when I try to use UIHints to style my output. I think the problem is that my javascript code looks for the old cell content, while the actual cell content has already been changed by my UIHint. What is the best way to make my Drowpdown Filter working anyways?

Thank you in advance!

Here is a part of my code:

Status.cshtml (Display Template for status)

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

    });
});