Brian J Brian J - 2 years ago 149
jQuery Question

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:

Class of datatable container:
dataTables_wrapper no-footer


How can you horizontal scroll a datatable on click event?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download