如何在jQuery DataTables表格中添加自定义顶部筛选控件？

1. 先添加自定义控件的HTML结构 #

在表格容器上方插入以下HTML，用于放置所需控件：

<div id="table-controls">
  <input type="date" id="start-date" placeholder="起始日期">
  <input type="date" id="end-date" placeholder="结束日期">
  <select id="filter-select">
    <option value="">全部</option>
    <option value="type1">错误类型1</option>
    <option value="type2">错误类型2</option>
  </select>
  <input type="text" id="custom-search" placeholder="输入搜索内容">
  <button id="search-trigger">搜索</button>
</div>

2. 修改DataTables配置项 #

调整dom属性整合自定义控件区域，更新ajax逻辑传递自定义参数：

const errorTable = $('#load-error-log').dataTable({
    processing: true,
    serverSide: true,
    orderMulti: false,
    order: [],
    aLengthMenu: [20, 50, 100, 200],
    aoColumnDefs: [{
        bSortable: false,
        aTargets: ['nosort']
    }],
    // 自定义布局：顶部显示控件区，左侧显示条数选择，后续是表格主体、信息、分页
    dom: '<"top-bar"<"custom-controls"#table-controls>> <"pull-left"l>tip',
    language: {
        search: "",
        searchPlaceholder: "Search"
    },
    ajax: {
        type: 'post',
        url: '/error-page/load-data',
        contentType: "application/json",
        data: function (d) {
            // 获取控件取值
            const customParams = {
                startDate: $('#start-date').val(),
                endDate: $('#end-date').val(),
                filterType: $('#filter-select').val(),
                searchKeyword: $('#custom-search').val()
            };
            // 合并默认参数与自定义参数
            return JSON.stringify($.extend({}, d, customParams));
        }
    },
});

3. 绑定控件触发事件 #

给控件添加监听，操作时触发表格重新加载数据：

// 搜索按钮点击触发
$('#search-trigger').on('click', function() {
    errorTable.draw();
});

// 日期选择器变化自动触发
$('#start-date, #end-date').on('change', function() {
    errorTable.draw();
});

// 下拉框变化自动触发
$('#filter-select').on('change', function() {
    errorTable.draw();
});

// 搜索框回车触发
$('#custom-search').on('keyup', function(e) {
    if (e.keyCode === 13) {
        errorTable.draw();
    }
});

4. 可选：添加基础样式 #

让控件横向排列更美观：

#table-controls {
    padding: 10px 0;
}
#table-controls input, #table-controls select, #table-controls button {
    margin-right: 12px;
    padding: 6px 8px;
    vertical-align: middle;
}

注意事项 #

• 后台接口/error-page/load-data需要接收新增的startDate、endDate、filterType、searchKeyword参数，并在查询逻辑中用于数据过滤。
• 如果需要保留DataTables默认搜索功能，可保留dom中的f，但需避免自定义搜索框与默认搜索框冲突。

内容的提问来源于stack exchange，提问作者geon