horizontal scroll not working in jquery datatable plugin

Question

horizontal scroll in datatable.net not aligning headers with actual column data on scrolling. On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.

My Code sample ::--------

 $('#abc').dataTable({
                "aaData": userContactGridData,
                "bAutoWidth":false,
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
                    { "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
                    { "sWidth": "200px", "aTargets": ["userName"] },
                    { "sClass": "icon", "aTargets": ["icon"] },
                    { "sClass": "gearIcon", "aTargets": ["gearIcon"] },
                    { "sClass": "userName", "aTargets": ["userName"] },
                    { "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
                    { "bVisible": false, "aTargets": ["adminRoleIcon"] },
                ],
                "sDom": 'C<"H"Tfr>t<"F"ip>',
                "iDisplayLength": 6,
                "bProcessing": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "aaSorting": [[2, "asc"]], // sort by name by default
                "sScrollX": "100%",
                "bScrollCollapse": true
                });

What have u tried?? some code ??

Vaibs_Cool
– Vaibs_Cool

2013-10-16 10:42:48 +00:00
Commented Oct 16, 2013 at 10:42 — Vaibs_Cool
– Vaibs_Cool, Commented Oct 16, 2013 at 10:42

gmrAndresRobert · Accepted Answer · 2020-08-01 06:05:38Z

2

Try adding sScrollX: 100% and bScrollCollapse: true

Then your code look like as below

    var oTable;
    $(document).ready(function () {
      oTable = $("#yourElementName").dataTable({
               "sScrollX": "100%",
               "bScrollCollapse": true,
               "bJQueryUI": true,
               "sPaginationType": "full_numbers",
               "aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
                                 { "aTargets": ['_all'], "bSortable": false}], 
                                  "aaSorting": [[0, 'asc']]
                    
                });
    
                setTimeout(function () {
                    oTable.fnAdjustColumnSizing();
                }, 10);
    
            });

edited Aug 1, 2020 at 6:05

gmrAndresRobert

14 bronze badges

answered Oct 16, 2013 at 10:50

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asaf Over a year ago

I already had the sScrollX and bScrollCollapse, but what actually solved my problem was the setTimeout. thanks.

Collectives™ on Stack Overflow

horizontal scroll not working in jquery datatable plugin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related