数据表修改过滤器html

Question

我正在使用jQuery Datatables plugin，我想为过滤器自定义一些生成的 HTML。

具体来说，它们会生成以下 HTML：

<div class="dataTables_filter" id="example_filter">
<label>Search: <input type="text" aria-controls="example"></label>

但是，我希望我的 HTML 更像这样：

<div class="filter-search">
<label class="search-label">
    <input type="text" placeholder="Search by name" />
    <span class="search-icon"></span>
</label>

我环顾四周，只找到something about changing the class，但在这种情况下，我想改变的不仅仅是课程。

我确信我可以在表格加载后破解 DOM，但我希望有一些方法可以作为 Datatable 的配置/初始化的一部分。

Answer 1

在表加载后不搞乱 DOM，我认为没有办法“更改”为过滤器生成的标记数据表，而无需破解数据表插件本身。

但是，一种不错的选择是简单地实现您自己的搜索过滤器。

在数据表标记之外制作自定义过滤器：

第 1 步：

省略 sDom 参数的“f”部分：https://datatables.net/usage/options

第 2 步：

为搜索字段编写自己的标记

第 3 步：

使用类似于此问题已接受答案的内容来实际过滤您自己的自定义搜索字段：Datatables - Search Box outside datatable

否则，您只需要为“f”生成的标记创建自定义 css 规则和/或移动它。

Answer 2

您可以通过修改数据表的oLanguage sSearch选项：

$('#example').dataTable({
    oLanguage: {
        sSearch: '<i>Other Search Text</i>'
    }
});