如何在点击事件上水平滚动数据表？

Question

我已经设置了一个包含大量列的数据表。目前有一个底部滚动条，但我想将滚动条右侧链接到数据表顶部的按钮。

该按钮链接到一个单击事件，我发现这个 jQuery 示例可以为水平向右滚动设置动画。但是当我单击按钮时，表格不会向右水平滚动：

        $("#scrollXRight-btn").click(function () {

            //$('div.dataTables_scrollBody').scrollRight($('#escalation').scrollRight() + 20); //method 1 didn't work

            var leftPos = $('div.dataTables_scrollBody').scrollLeft();
            $("div.dataTables_scrollBody").animate({ scrollLeft: leftPos + 200 }, 800);

        });

我确实尝试使用选择器这里提到但动画没有触发。

数据表ID：

escalation

数据表容器类：

dataTables_wrapper no-footer

问题：

如何在点击事件上水平滚动数据表？

Answer 1

尝试在数据表中启用scrollX，如果需要的话，可以使用固定列扩展。

Answer 2

解决方案1：鼠标上下滚动时按左Shift

解决方案2：

$(document).ready(function() {
  $('#example').DataTable({
    fixedColumns: {
        start: 0,
        end: 2
    },
    paging: false,
    scrollX: '100%',
    scrollY: 300,
        
  });
});