数据表中的搜索栏未显示

Question

我试图将与DataTable相关的一些搜索栏移动到页面顶部，而不是表格的页脚。但是，它们没有出现。我检查了重复的ID，确保我的选择器匹配，并且仍然没有。

HTML

<div style="border: solid black 2px">
    <h4>Search Users</h4>
    <div style="display: flex; justify-content: space-between" >
        <div id="ddlSearchFilterHP">Select a Health Plan:</div>
        <div id="ddlSearchFilterUR">Select a User Role:</div>
    </div>
</div>

表格的相关部分

 <tbody>
        @foreach (var user in Model.Roles)
        {
            <tr>
                <td><button id="@user.UserId" class="updateUser" value="@user.NtUserId">Edit</button></td>
                <td class="select-filterHP">@user.HpId</td>
                <td>@user.LastName</td>
                <td>@user.FirstName</td>
                <td>@user.NtUserId</td>
                <td class="select-filterUR">@user.RoleId</td>
                <td class="activeUser">@user.Active</td>
                <td>@user.DefaultPlanId</td>
            </tr>
        }
    </tbody>

JavaScript

 table.columns( '.select-filterHP' ).every(function () {
            var that = this;
            console.log(that);
            // Create the select list and search operation
            var select = $('<select />')
                .appendTo(
                    '#ddlSearchFilterHP'
                )
                .on( 'change', function () {
                    that
                        .search( $(this).val() )
                        .draw();
                });

            // Get the search data for the first column and add to the select list
            this
                .cache( 'search' )
                //.sort()
                .unique()
                .each( function ( d ) {
                    select.append($('<option value="' + d + '">' + d + '</option>'));
                });
        });
        table.columns('.select-filterUR').every(function () {
            var that = this;
            console.log(that);
            // Create the select list and search operation
            var select = $('<select />')
                .appendTo(
                    '#ddlSearchFilterUR'
                )
                .on('change', function () {
                    that
                        .search($(this).val())
                        .draw();
                });

            // Get the search data for the first column and add to the select list
            this
                .cache('search')
                //.sort()
                .unique()
                .each(function (d) {
                    select.append($('<option value="' + d + '">' + d + '</option>'));
                });
        });