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等。

如果我删除了滚动功能，则标题对齐得很好（尽管由于表格太大，所以表格已被切除）。

如果我查看开发者控制台中的elements选项卡，我可以看到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>

现在，作品像魅力一样排列！

使用JQuery DataTable滚动，模态和未对齐的标题

1 个答案: