时间戳

首页 > 解决方案 > DataTables scrollX 似乎不起作用

javascript - DataTables scrollX 似乎不起作用

问题描述

我看过其他关于此的帖子，但我看到的解决方案似乎不起作用。

我正在使用垂直滚动（工作正常），但水平滚动不太好。

这是我的html：

<!DOCTYPE html>

    <title>•    18464</title>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/fc-3.3.2/fh-3.1.8/rg-1.1.2/sc-2.0.3/sp-1.2.2/sl-1.3.1/datatables.min.css"/>
    <link rel="stylesheet" href="css/w3.css" />


    <script  src="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/fc-3.3.2/fh-3.1.8/rg-1.1.2/sc-2.0.3/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>
    <script src="js/project.js"></script>
    <script src="js/dt.js"></script>

</head>
<body>
    <div style="width: 100%">
        <h2 style="text-align: center">18464-PID -</h2>
        <table style="width: 100%">
            <tr>
                <td >
                    <table>
                        <thead>
                            <tr>
                                <th>BEGIN DATE</th>
                                <th>END DATE</th>

                            </tr>
                        </thead>
                        <tr>
                            <td>
                                <input type="text" id="beginDate">
                            </td>
                            <td>
                                <input type="text" id="endDate">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-responsive">
                        <table id="claims" style = "width: 100%" class="display nowrap" >
                            <thead>
                                <tr>
                                    <th>ICN</th>
                                    <th>PROVIDER #</th>
                                    <th>PROVIDER NAME</th>
                                    <th>PAC #</th>
                                    <th>LINE #</th>
                                    <th>DISPOSITION</th>
                                    <th>PKG</th>
                                    <th>SUBSCRIBER</th>
                                    <th>RENDERING PROVIDER NAME</th>
                                    <th>RENDERING PROVIDER NPI</th>
                                    <th>RENDERING PIN</th>
                                    <th>CHECK AMOUNT</th>
                                    <th>LINE ALLOWED</th>
                                    <th>PROVIDER LIABILITY</th>
                                    <th>SUBSCRIBER LIABILITY</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

    </div>
</body>

我的JavaScript：

$(document).ready(function () {
// loading this here avoids timing issues since the ready() ensures the DOM is loaded


let today = new Date();
let formattedDate = today.getMonth()+1 + "/" + today.getDate() + "/" + today.getFullYear();
$('#beginDate').val(formattedDate);
$('#endDate').val(formattedDate);
$('#claims').DataTable({
    scrollX: true,
    scrollY: '55vh',
    paging: false,
    
    ajax: {
        url: "php/my.php",
        dataSrc: ""
    },
    
   
   
    columns: [
        {data: "ICN"},
        {data: "PROVIDER_NUMBER"},
        {data: "PROVIDER_NAME"},
        {data: "IN_PAC_NUMBER"},
        {data: "IN_LINE_NUMBER"},
        {data: "IN_DISPOSITION"},
        {data: "PACKAGE_CODE"},
        {data: "SUBSCRIBER"},
        {data: "RENDERING_PROVIDER_NAME"},
        {data: "RENEDERING_PROVIDER_NPI"},
        {data: "RENDERING_PROVIDER_PIN"},
        {data: "IN_CHECK_AMT"},
        {data: "IN_LINEALLOWED"},
        {data: "IN_PVLIAB"},
        {data: "IN_LINESUBLIAB"}
    ]
});
});

对于 jQuery 日期选择器：

$(function() {
$( "#beginDate").datepicker();
$( "#endDate").datepicker();
});

这一切都很好，但我看不到屏幕右侧的值。

我会发布一个示例，但数据都是机密的。

标签： javascripthtmldatatables

解决方案

推荐阅读