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

        });

水平滚动在jquery datatable插件中不起作用

1 个答案: