如何修复JQuery DataTable列对齐及Tab滚动不同步问题

问题原因 #

启用fixedHeader: true和scrollX: true后，Tab键切换列搜索输入框时，表头会跟随输入框位置滚动，但表体的滚动容器未同步触发滚动，导致列对齐错位。

修复方案 #

1. 监听Tab切换事件，同步表头与表体滚动 #

在现有代码中添加滚动同步逻辑，当Tab切换到列搜索框时，手动对齐表头和表体的滚动位置：

$(document).ready(function () {
    var table = $('#example').DataTable({
        "ordering": false,
        "retrieve": true,
        "fixedHeader": true,
        "scrollX": true,
        "scrollY": '600px',
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'excel',
                text: 'Export',
                title:'Aluminum Coil Production Tracking Entries',
                className: 'btn btn-primary',
                header: true,
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
                }
            }
        ]
    });

    // 原有列搜索逻辑
    table.columns().every( function () {
        var that = this;
        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

    // 新增：Tab切换输入框时同步滚动
    $('thead input').on('focus', function() {
        var headerScrollPos = $('.fixedHeader-floating').scrollLeft();
        $('.dataTables_scrollBody').scrollLeft(headerScrollPos);
    });

    // 补充：手动拖动表头滚动条时同步表体
    $('.fixedHeader-floating').on('scroll', function() {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });
});

2. 检查插件版本兼容性 #

如果上述代码无效，确认FixedHeader插件与DataTable的版本是否匹配，建议使用最新稳定版，避免版本冲突导致的滚动同步失效。

3. 修正CSS样式冲突 #

确保自定义样式没有破坏DataTable滚动容器的默认行为，可添加以下CSS强制保持滚动容器的正确状态：

.dataTables_scrollBody, .fixedHeader-floating {
    overflow-x: auto !important;
}

说明 #

通过监听列搜索输入框的focus事件（Tab切换会触发该事件），手动同步表头与表体的滚动位置，同时监听表头滚动事件实现双向同步，确保表头和表体始终对齐。

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