Question

我有一个包含数据表的网络应用程序，我试图让它响应更改视口大小（即更改浏览器窗口的宽度或在具有不同屏幕分辨率的设备上运行，如笔记本电脑与平板电脑和智能手机）

这是HTML：

<div ng-hide="loading" class="panel pagination-inverse m-b-0 clearfix">
    <table id="data-table-pendingList" data-order='[[1,"desc"]]' class="table table-bordered table-hover" style="width: 100%;">
        <thead>
            <tr class="lime">
                <th>Order ID</th>
                <th>Order Date</th>
                <th class="text-center">First Name</th>
                <th class="text-center">Last Name</th>
                <th class="text-center">License Number</th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Total Amount</th>
                <th data-sorting="disabled"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

这是支持JS / SQ：

if ($('#data-table-pendingList').length !== 0) {
    $('#data-table-pendingList').DataTable({
        destroy: true,
        aaData: $scope.OrderItems,
        aoColumns: [
            { "sTitle": "Order ID", "mData": "ConfimationNumber", "sClass": "left" },
            { "sTitle": "Order Date", "mData": "OrderDate", "sClass": "left" },
            { "sTitle": "First Name", "mData": "FirstName", "sClass": "left" },
            { "sTitle": "Last Name", "mData": "LastName", "sClass": "left" },
            { "sTitle": "Patient ID", "mData": "LicenseNumber", "sClass": "left" },
            { "sTitle": "Quantity", "mData": "Quantity", "sClass": "right" },
            { "sTitle": "Total Amount", "mData": "TotalAmount", "sClass": "right" },
            { "sTitle": "", "mData": "ApplicationStatus", "defaultContent": '<td> <a id="btnEdit" class="btn btn-success btn-xs"><i ng-if="ApplicationStatus == 8" class="fa fa-edit fa-fw"></i> Modify</a></td>' },
        ],
        responsive: true,
        colReorder: false,
        keys: true
    });

使用上面的代码运行时，数据表最初在全屏或接近全屏的笔记本电脑显示器上看起来正常：注意dataTable如何开始在包含面板的外面流血。如果我变得更小，它将完全在视口外流血（没有水平滚动条）

但如果我将浏览器窗口的宽度调整得更窄，它看起来像这样：

如果我像这样将ScrollX添加到JS端：

if ($('#data-table-pendingList').length !== 0) {
    $('#data-table-pendingList').DataTable({
        destroy: true,
        aaData: $scope.OrderItems,
        aoColumns: [
            { "sTitle": "Order ID", "mData": "ConfimationNumber", "sClass": "left" },
            { "sTitle": "Order Date", "mData": "OrderDate", "sClass": "left" },
            { "sTitle": "First Name", "mData": "FirstName", "sClass": "left" },
            { "sTitle": "Last Name", "mData": "LastName", "sClass": "left" },
            { "sTitle": "Patient ID", "mData": "LicenseNumber", "sClass": "left" },
            { "sTitle": "Quantity", "mData": "Quantity", "sClass": "right" },
            { "sTitle": "Total Amount", "mData": "TotalAmount", "sClass": "right" },
            { "sTitle": "", "mData": "ApplicationStatus", "defaultContent": '<td> <a id="btnEdit" class="btn btn-success btn-xs"><i ng-if="ApplicationStatus == 8" class="fa fa-edit fa-fw"></i> Modify</a></td>' },
        ],
        responsive: true,
        colReorder: false,
        keys: true
        , "scrollX": true //<<<<<<<<<<<=====================
    });

表INITIALLY显示如下：请注意除第一列之外的所有列都已消失，但我得到了一个细节＆＃34; +＆＃34;按钮。

最后，如果我手动调整浏览器的窗口大小，它会呈现我想要的方式：在这里，我们看到所有数据都显示出来，我们得到一个漂亮的水平滚动条。

我需要做什么才能使用最初的 , "scrollX": true 水平滚动条呈现我的dataTable，而无需调整浏览器大小？如果是用户在浏览器全屏幕上运行应用程序，但在智能手机或小平板电脑上，他们会看到＆＃34; No column＆＃34; dataTable的版本，它们永远不会出现退出全屏然后调整屏幕大小。（切换全屏模式也将正确呈现DataTable）

我在设置表格后尝试将此行添加到我的JS中：

if ($('#data-table-pendingList').length !== 0) {
    $('#data-table-pendingList').DataTable({
        destroy: true,
        aaData: $scope.OrderItems,
        aoColumns: [
...
    responsive: true,
    colReorder: false,
    keys: true
    , "scrollX": true
});

$('#data-table-pendingList').DataTable().columns.adjust();  //<<<<================

或者使用数据表设置的adjust部分，如下所示：

if ($('#data-table-pendingList').length !== 0) {
    $('#data-table-pendingList').DataTable({
        destroy: true,
        aaData: $scope.OrderItems,
        aoColumns: [
...
    responsive: true,
    colReorder: false,
    keys: true
    , "scrollX": true
}).columns.adjust();//<<<<================

我甚至尝试添加autoWidth: true参数，但没有任何区别，因为带"scrollX": true的初始dataTable始终使用隐藏的列进行渲染，而不是使用水平滚动显示的所有列杆

所以请帮忙。我需要做什么才能使用最初的 , "scrollX": true 中的水平滚动条呈现我的dataTable - 而不让用户做某事来强制dataTable重新渲染？

jQuery DataTables with＆＃34; scrollX＆＃34;：true最初不呈现列

0 个答案: