单击标题内的输入字段时的DataTables过滤器列

DataTables 是一款基于 jQuery 的插件，它能够为 HTML 表格添加高级的交互控件，比如分页、即时搜索以及多列排序等。当你提到“单击标题内的输入字段时的DataTables过滤器列”，这通常指的是 DataTables 的一个功能，允许用户通过点击表头中的输入框来过滤表格中的数据。

基础概念

DataTables 过滤器列：这是 DataTables 插件提供的一个功能，它允许用户在表格的列标题旁边输入文本来过滤该列的数据。当用户输入文本时，表格会实时更新，只显示与输入文本匹配的行。

类型

全局过滤器：在整个表格上方的输入框中输入文本，过滤所有列的数据。
列级过滤器：在每个表头单元格内设置独立的输入框，仅过滤该列的数据。

应用场景

数据管理后台：管理员需要快速筛选大量数据时。
报表系统：用户需要根据不同条件查看报表数据时。
电商网站：用户可以根据商品属性快速查找商品。

实现方式

以下是一个简单的示例代码，展示如何在 DataTables 中启用列级过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTables Column Filter Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <!-- 表格内容 -->
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable({
        initComplete: function () {
            this.api().columns().every( function () {
                var title = this.header().textContent;
                $(this.header()).html( '<input type="text" placeholder="Filter '+title+'" />' );
            } );
        }
    });
});
</script>
</body>
</html>