首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无数据时的Datatable水平滚动条

当 DataTable 没有数据时,默认情况下水平滚动条不会出现

首先,确保已加载 jQuery 和 DataTables 插件:

代码语言:javascript
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

然后,在 HTML 中创建一个表格:

代码语言:javascript
复制
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <!-- 添加更多列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 数据将在这里插入 -->
    </tbody>
</table>

接下来,在 JavaScript 中初始化 DataTable:

代码语言:javascript
复制
$(document).ready(function() {
    $('#example').DataTable({
        "scrollX": true, // 启用水平滚动条
        "language": {
            "emptyTable": "No data available" // 自定义空表提示
        }
    });
});

上面的代码会创建一个带有水平滚动条的 DataTable。即使没有数据,水平滚动条也会显示。此外,我们还自定义了空表提示。

注意:这种方法可能会导致在没有数据时,表格的列宽不一致。为了解决这个问题,可以在 CSS 中设置固定宽度:

代码语言:javascript
复制
table.dataTable thead th,
table.dataTable tbody td {
    white-space: nowrap;
    width: 150px; /* 根据需要调整宽度 */
}

这样,即使没有数据,表格的列宽也会保持一致。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券