水平滚动在jquery数据表插件中不起作用

Question

datatable.net 中的水平滚动未将标题与滚动时的实际列数据对齐。 在滚动表主体被移动但标题没有。我想设置标题可滚动。

我的代码示例 ::--------

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

Answer 1

尝试添加sScrollX: 100% 和bScrollCollapse: true

那么你的代码如下所示

    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);
    
            });