DataTable配置scrollX:true后自定义列搜索输入框消失问题咨询

问题原因 #

1. DataTable开启scrollX: true时会自动重构DOM结构，将原表格拆分为表头、表体、表尾三个独立的滚动容器，你直接操作原表格tfoot插入的输入框会被重构后的DOM覆盖，因此消失。
2. 你同时开启了responsive: true和scrollX: true，两个功能存在原生兼容冲突，会加剧DOM结构的异常变动。
3. 原代码中$('#datos thead tr:eq(1) th').length获取的长度为0（你的thead只有1行tr），导致后续的输入框跳过逻辑也存在错误。

修复方案 #

1. 调整JavaScript代码

将输入框插入逻辑放到DataTable的initComplete回调中，使用DataTable提供的API获取真实渲染的表尾节点，若不需要响应式列隐藏功能建议关闭responsive减少冲突：

function parametrosTabla6(tabla) {
    var tabla2 = $(tabla).DataTable({
        'paging': true,
        'searching': true,
        'ordering': true,
        'orderCellsTop': true,
        'order': [
            [0, 'desc']
        ],
        "scrollX": true,
        'columnDefs': [
            {
                'responsivePriority': 1,
                'targets': 0
            },
            {
                'responsivePriority': 2,
                'targets': -1
            },
            { "className": "dt-center", "targets": "_all" }
        ],
        // 不需要响应式列隐藏可关闭，和scrollX存在原生冲突
        'responsive': false,
        'initComplete': function () {
            var api = this.api();
            var colCount = api.columns().count();
            // 遍历真实渲染的表尾列
            api.columns().footer().each(function (colNode, i) {
                // 最后一列操作列不添加输入框
                if (i === colCount - 1) return;
                var title = $(colNode).text();
                $(colNode).html(`<input style="width:100%" class="form-control" data-column="${i}" type="text" placeholder="${title}" />`);
                // 绑定搜索事件
                $('input', colNode).on('keyup change', function () {
                    if (api.column(i).search() !== this.value) {
                        api.column(i).search(this.value).draw();
                    }
                });
            });
        }
    });
}

2. HTML结构无需修改

现有表格的tfoot配置已经符合要求，不需要额外调整。

效果验证 #

修改后刷新页面，开启横向滚动时表尾的搜索输入框会跟随表格一起滚动，不会消失。

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