Показывая или скрывая элементы в таблице с помощью css, javascript прокручивает данные в начало каждый раз

Question

У меня есть большая таблица, которую я обработал с помощью datatables .Это большой, поэтому я использовал прокрутки х и у.и я добавил кнопки, чтобы показать / скрыть дочерние строки с помощью 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();
        }); 

Работает при отображении или скрытии строк.Но проблема возникает каждый раз, когда я нажимаю кнопку показать / скрыть, таблица автоматически прокручивается вверх.Мне нужно, чтобы положение таблицы было стабильным во время шоу / скрытия.Спасибо

ОБНОВЛЕНИЕ: Я пытался использовать функцию datatables при нажатии кнопки, но она не работает.Смотри ниже

<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