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

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

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

Answer 2

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

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

要在数据表标记外部创建自定义过滤器：

第1步：

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

第2步：

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

第3步：

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

否则，您只需为'f'生成的标记制作自定义css规则和/或移动它。

数据表修改过滤器html

2 个答案: