jquerydatatableshorizontal-scrolling

How to horizontal scroll datatable on click event?

I've set up a datatable with a large number of columns. Currently there is a bottom scrollbar but I want to link a scroll right to a button at the top of the datatable.

The button is linked to a click event and I found this jQuery example to animate a horizontal scroll right. But when I click the button the table isn't scrolled horizontally right:

        $("#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);

        });

I did try using the selector mentioned here but the animation didn't fire.

ID of datatable: escalation

Class of datatable container: dataTables_wrapper no-footer

Question:

How can you horizontal scroll a datatable on click event?

Solution

  • Try to enable scrollX in datatables and maybe use fixed columns extension, if needed.