DataTables 表格插件与 Bootstrap 选项卡的滚动集成方案

陆或愉

于 2025-06-06 09:01:26 发布

阅读量258

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00808/article/details/148464207

DataTables 表格插件与 Bootstrap 选项卡的滚动集成方案

DataTables Tables plug-in for jQuery 项目地址: https://gitcode.com/gh_mirrors/da/DataTables

问题背景

在 Web 开发中，我们经常需要将 DataTables 表格插件与 Bootstrap 的选项卡组件结合使用。然而，当表格初始化时如果位于隐藏的选项卡中（即 display:none 状态），会出现一个典型问题：表格列宽计算错误，导致滚动功能无法正常工作。

这是因为浏览器无法为隐藏元素提供准确的尺寸测量，而 DataTables 在初始化时需要这些尺寸信息来正确设置列宽和滚动区域。

解决方案

核心思路

通过监听 Bootstrap 选项卡的切换事件，在选项卡显示时调用 DataTables 的 columns.adjust() 方法重新计算列宽。具体实现步骤如下：

监听 Bootstrap 的 shown.bs.tab 事件
使用 $.fn.dataTable.tables() 获取所有可见的表格实例
调用 columns.adjust() 方法重新调整列宽

代码实现

$(document).ready(function() {
    // 监听选项卡切换事件
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        // 获取所有可见的DataTables实例并调整列宽
        $.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
    });
    
    // 初始化所有表格
    $('table.table').DataTable({
        ajax: '../ajax/data/arrays.txt',
        scrollY: 200,          // 启用垂直滚动，高度200px
        scrollCollapse: true,   // 当数据不足时也显示滚动条
        paging: false           // 禁用分页
    });

    // 为第二个表格添加默认搜索条件（演示用）
    $('#myTable2').DataTable().search('New York').draw();
});

技术要点解析

1. Bootstrap 选项卡事件

shown.bs.tab 是 Bootstrap 提供的选项卡切换完成事件
相比 show.bs.tab，它确保切换动画已完成，DOM 完全可见

2. DataTables API 方法

$.fn.dataTable.tables()：静态方法，获取页面上所有 DataTables 实例
- visible: true 参数只返回当前可见的表格
- api: true 参数返回 DataTables API 实例而非 jQuery 对象
columns.adjust()：重新计算列宽以适应容器
- 对于滚动表格尤其重要，确保表头与内容列对齐