CODEWITHSUNDEEP
jquerydatatableshorizontal-scrolling
Brian Var
Brian Var

Reputation: 6227

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?

Upvotes: 0

Views: 2530

Answers (2)

Adrian P.
Adrian P.

Reputation: 5228

Solution 1: Press the left shift when the mouse is scrolling up/down

Solutions2:

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

Upvotes: 0

cssBlaster21895
cssBlaster21895

Reputation: 3710

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

Upvotes: 1

Related Questions