Javascript 引导表筛选器扩展使用html选项的完整列表填充

之前有人问过这个问题，但我对HTML有一个问题

引导筛选器使用HTML数据而不是值填充select元素。 我只有两个状态选项：Active和Inactive，但filter获取每行的状态并将其放入select元素中

<table class="table sortable-theme-bootstrap table-hover"
       id="trucklist"
       data-escape="false"
       data-filter-control="true"
       data-pagination="true"
       data-search="true"
       data-page-size="25"
       data-show-columns="true"
       data-cookie="true"
       data-cookie-id-table="saveId">
    <thead>
        <tr>
            <th data-field="truck">
                @Html.DisplayNameFor(model => model.TruckNo)
            </th>
            <th data-sortable="false"
                data-field="fleet"
                data-filter-control="select">
                @Html.DisplayNameFor(model => model.FleetName)
            </th>
            <th data-field="lastDate"
                data-searchable="false"
                data-sortable="true"
                data-sorter="dateSorter">
                @Html.DisplayNameFor(model => model.LastDate)
            </th>
            <th data-field="dispatch"
                data-filter-control="select"
                data-sortable="false">
                @Html.DisplayNameFor(model => model.DispatchName)
            </th>
            <th data-field="phone"
                data-searchable="false"
                data-sortable="false">
                @Html.DisplayNameFor(model => model.DispatchTelephone)
            </th>
            <th data-field="status"
                data-sortable="false"
                data-filter-control="select">
                @Html.DisplayNameFor(model => model.TruckStatus)
            </th>
            <th data-field="available"
                data-sortable="false"
                data-filter-control="select"
                data-filter-custom-search="data">
                @Html.DisplayNameFor(model => model.Availability.StatusText)
            </th>
            <th data-field="city"
                data-sortable="true"
                data-searchable="false">
                @Html.DisplayNameFor(model => model.Availability.AvailableCity)
            </th>
            <th data-field="from"
                data-sortable="true"
                data-searchable="false"
                data-sorter="dateSorter">
                @Html.DisplayNameFor(model => model.Availability.AvailableFrom)
            </th>
            <th data-sortable="false"
                data-searchable="false">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {

            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.TruckNo)
                </td>
                <td class="center">
                    @Html.DisplayFor(modelItem => item.FleetName)
                </td>
                <td class="center">
                    @Html.DisplayFor(modelItem => item.LastDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DispatchName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DispatchTelephone)
                </td>
                <td class="center">
                    <span class='label label-@Html.DisplayFor(modelItem => item.TruckStatusClass)'>@Html.DisplayFor(modelItem => item.TruckStatusText)</span>
                </td>
                <td class="center">
                    <span class='label label-@Html.DisplayFor(modelItem => item.Availability.StatusClass)'>@Html.DisplayFor(modelItem => item.Availability.StatusText)</span>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Availability.AvailableCity)
                </td>
                <td class="center">
                    @Html.DisplayFor(modelItem => item.Availability.AvailableFromDisplay)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { TruckID = item.TruckID }, new { @class = "btn btn-info btn-xs" })
                </td>
            </tr>
        }
    </tbody>
</table>

它仅在以下两种情况下工作不正常：

 <td class="center">
                <span class='label label-@Html.DisplayFor(modelItem => item.TruckStatusClass)'>@Html.DisplayFor(modelItem => item.TruckStatusText)</span>
            </td>
            <td class="center">
                <span class='label label-@Html.DisplayFor(modelItem => item.Availability.StatusClass)'>@Html.DisplayFor(modelItem => item.Availability.StatusText)</span>
            </td>

---

您可以通过在列中使用引导表数据过滤器数据收集器属性来修复此问题。例如，我通过创建这个javascript函数解决了这个问题

window.tableFilterStripHtml = function (value) {
   return value.replace(/<[^>]+>/g, '').trim();
}

然后在指定函数的列中，如下所示：

<th data-field="state" data-sortable="true" data-filter-control="select" data-filter-data-collector="tableFilterStripHtml">State</th>

这样做的目的是调用忽略所有HTML标记并返回过滤器干净名称的函数。因为HTML标签是创建这个问题的人

---

我花了很长一段时间自己想办法解决这个问题，所以我觉得无论谁发现自己遇到了同样的问题，这个问题都值得一提。

非常感谢regex，它为我节省了很多时间，而你显然为我花了很多时间：-