如何在 DataTables 中获取搜索输入？

Posted 2023-05-09

【中文标题】如何在 DataTables 中获取搜索输入？

【英文标题】：How to get search input in DataTables?

【发布时间】：2021-10-21 05:22:06

【问题描述】：

这是数据表https://datatables.net/forums/discussion/23922/assign-an-id-to-the-search-input

我在 Vue3 项目中有一个实现，但我无法修复其中的一些错误。它应该很简单，但我无法在其中获取任何动态生成的元素。例如需要向搜索输入添加类。 根据我上面提到的链接，我使用的代码看起来像

    setDataTable() 
        var table = $('#myTable');

        if( this.dataTableObject ) return this.dataTableObject.draw();

        this.dataTableObject = table.DataTable(
            'responsive': true,
            "pageLength": 10,
            ...
        );


        // Both selectors are empty. 
        $('.dataTables_wrapper').find('input');  
    

在代码之前我导入所需的库

import "datatables.net-bs4/css/dataTables.bootstrap4.css"
import 'datatables.net-bs4'

但是选择器是空的。希望有人会知道，因为我花了一整天都没有成功。谢谢。

【问题讨论】：

能否请您添加完整的代码？

代码不多了。

【参考方案1】：

这个元素很容易编辑，我为它工作的输入搜索添加了“style="background:green"'。

尝试按属性设置属性：

document.getElementById("p2").style.color="blue";

或尝试使用以下方法更改整个班级：

document.getElementById("p2").className = "classname";

【讨论】：

那么你为什么要编写代码 $('.dataTables_filter input').addClass('form-control');不工作？

这取决于项目的结构，上面的其余代码对你有用吗？我建议你做一个最小的测试来检查这个。

好的，谢谢。今天，minimal 意味着 vue、webpack、bunders、modules，......就像 10 年前一样。代码还是越来越复杂。我有一个解决方案，但看起来很糟糕。

【参考方案2】：

我的解决方案是基于draw event。

this.dataTableObject.on('draw', function(e) 
    $(this).closest('.dataTables_wrapper')
        .removeClass('form-inline')
        .find('.col-xs-12').addClass('col-12');
);

DataTables 论坛说我有旧的 DTBootstrap4 版本。所以我很好奇他们在我问他们的问题中回答了什么。因为这是很脏的代码。