javascript - 使用 css 显示或隐藏表中的元素，javascript 每次都将数据表滚动到顶部

Question

我有一个用 datatables 渲染的大表.它很大，所以我使用了 scroll x 和 y 。并且我在 CSS/javascript 的帮助下添加了按钮来显示/隐藏子行，如下所示。

 // for default : shown
        $("input:checkbox.clicktohide:not(:checked)").each(function() {
         var column = "table ." + $(this).attr("name");
         $(column).hide();
        });

     $("input:checkbox.clicktohide").click(function(){
         var column = "table ." + $(this).attr("name");
         $(column).toggle();
        }); 

        // for default : hidden
        $("input:checkbox.clicktoshow:not()").each(function() {
         var column = "table ." + $(this).attr("name");
         $(column).hide();
        });

        $("input:checkbox.clicktoshow").click(function(){
            var column = "table ." + $(this).attr("name");
            $(column).toggle();
        }); 

它用于显示或隐藏行。但是每次单击显示/隐藏按钮时都会出现问题，表格会自动滚动到顶部。我需要 table 的位置在显示/隐藏期间保持稳定。 谢谢

更新:我曾尝试在单击按钮时使用数据表功能，但它不起作用。见下文

<script type="text/javascript">$(document).ready( function () {
        var table = $('#shipmentshortage').DataTable({
            paging:   false,
            "ordering": false,
            scrollY:        '75vh',
            scrollX:        true,
            scrollCollapse: true,
            searching: false,
            info: false,
            fixedColumns:   {
                leftColumns: 2
            },
            dom: 'Bfrtip',
            buttons: [
                'excel'
            ]
        });

        $('#MyButton').click(function(){
            table.scroller.toPosition( 50 );
        });

    } );

</script> 

Answer 1

你有没有在你的点击中尝试过这样的事情:

$('#shipmentshortage').animate({
                scrollTop: $("#IdOfButtonYouClicked").offset().top
            }, 2000);//2000 would be height of your table