使用 JQuery DataTables 滚动、模态和未对齐的标题

Question

我正在创建一个网站，其中使用从数据库加载的数据在模式中显示 jQuery 数据表。我已经让表格正确加载并显示了所有内容。表格比较大，所以我尝试使用 ScrollX 来启用水平滚动。

这是我对数据表的 Javascript 调用：

<script> 

    $(document).ready(function () {
        $.ajax({
            type: "Post",
            url: '<%= ResolveUrl("Review.aspx/GetData") %>',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                //datasource = data;
                $('#example').dataTable({
                    "scrollX": true,
                    "scrolly": true,

                    "aaData": JSON.parse(data.d),
                    "columns": [
                        { "data": "ReviewerName" },
                        { "data": "OrigSecObjID" },
                        { "data": "OrigUserID" },
                        { "data": "OrigUserName" },
                        { "data": "OrigEffCRUD" },
                        { "data": "NewSecObjID" },
                        { "data": "NewUserID" },
                        { "data": "NewUserName" },
                        { "data": "NewEffCRUD" },
                        { "data": "Active" },
                        { "data": "ReasonForChange" },
                        { "data": "HaveAccess" },
                        { "data": "VerifiedBy" },
                        { "data": "VerifiedDate" },
                        { "data": "ActionsTaken" },
                        { "data": "ReviewerEmail" },
                        { "data": "ObjectDescription" },
                        { "data": "recordStatus" },
                    ]

                });

            },
            error: function (err) {
                alert(err);
            }
        })
    });

    $(document).on('shown.bs.modal', function (e) {
        $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust().draw();


    });</script>

这是我在模态中的表格：

<table id="example" class="display" cellpadding="0" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Reviewer Name</th>
        <th>OrigSecID</th>
        <th>OrigUserID</th>
        <th>OrigUserName</th>
        <th>OrigEffCRUD</th>
        <th>NewSecObjID</th>
        <th>NewUserID</th>
        <th>NewUserName</th>
        <th>NewEffCRUD</th>
        <th>Active</th>
        <th>ReasonForChange</th>
        <th>HaveAccess</th>
        <th>VerifiedBy</th>
        <th>VerifiedDate</th>
        <th>ActionsTaken</th>
        <th>ReviewerEmail</th>
        <th>ObjectDescription</th>
        <th>recordStatus</th>

     </tr>
</thead></table>

我查看了这个站点和其他站点，并尝试了许多方法来尝试使其正常工作，但都失败了。我尝试使用可滚动的 div 而不是内置的 scrollx、columns.adjust 等。

如果我删除滚动功能，标题会很好地对齐（尽管表格因为太大而被截断）。

如果我查看开发人员控制台中的元素选项卡，我可以看到类 dataTables_scrollHead 的位置正确，但 dataTables_scrollHeadInner 的位置不正确。

Incorrect Alignment

Correct Alignment with No Scrolling

任何帮助将不胜感激！

Answer 1

经过大量故障排除等后，我发现这很有效：

添加到css：

div.dataTables_scrollHeadInner { margin-left: 0px !important; margin-right: 10px !important;}   

然后最后一列被截断了一点，所以我添加了一个虚拟的空白列：

<script> 

    $(document).ready(function () {
        $.ajax({
            type: "Post",
            url: '<%= ResolveUrl("Review.aspx/GetData") %>',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                //datasource = data;
                $('#example').dataTable({
                    "scrollX": true,


                    "aaData": JSON.parse(data.d),
                    "columns": [
                        { "data": "ReviewerName" },
                        { "data": "OrigSecObjID" },
                        { "data": "OrigUserID" },
                        { "data": "OrigUserName" },
                        { "data": "OrigEffCRUD" },
                        { "data": "NewSecObjID" },
                        { "data": "NewUserID" },
                        { "data": "NewUserName" },
                        { "data": "NewEffCRUD" },
                        { "data": "Active" },
                        { "data": "ReasonForChange" },
                        { "data": "HaveAccess" },
                        { "data": "VerifiedBy" },
                        { "data": "VerifiedDate" },
                        { "data": "ActionsTaken" },
                        { "data": "ReviewerEmail" },
                        { "data": "ObjectDescription" },
                        { "data": "recordStatus" },
                        { "defaultContent": "" }
                    ]

                }).fnAdjustColumnSizing();

            },
            error: function (err) {
                alert(err);
            }
        })
    });


    $(document).on('shown.bs.modal', function (e) {
        $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust().draw();


    });</script>

表：

  <table id="example" class="display" cellpadding="0" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Reviewer Name</th>
        <th>OrigSecID</th>
        <th>OrigUserID</th>
        <th>OrigUserName</th>
        <th>OrigEffCRUD</th>
        <th>NewSecObjID</th>
        <th>NewUserID</th>
        <th>NewUserName</th>
        <th>NewEffCRUD</th>
        <th>Active</th>
        <th>ReasonForChange</th>
        <th>HaveAccess</th>
        <th>VerifiedBy</th>
        <th>VerifiedDate</th>
        <th>ActionsTaken</th>
        <th>ReviewerEmail</th>
        <th>ObjectDescription</th>
        <th>Status of Record</th>
        <th></th>

     </tr>
</thead>

现在可以像魅力一样工作和对齐！