垂直滚动贴合

早在 2015 年 我为 DataTables 推出了一款插件，它提供将表格的页面长度动态调整的功能以使其适合容器内。当分页启用而滚动禁用时，该插件运作良好，但 DataTable 的垂直贴合也适用于滚动。

在本篇文章中，我将推出适用于启用滚动时的 DataTables 的同类插件 - 以下为最终效果演示

使用方法

使用 ScrollResize 插件适用于 DataTables 非常简单 - 在您的页面中包含该插件的 Javascript

然后通过在您的 DataTable 初始化中指定 scrollResize 选项以及 scrollY（用于启用滚动）来启用此功能

$('#myTable').DataTable( {
    scrollResize: true,
    scrollY: 100,
    scrollCollapse: true,
    paging: false
} );

请注意，在使用 ScrollResize 时，通常还会像此处一样禁用分页，但这并非强制要求（分页可能有助于改善更大数据集的性能）。

布局

在 DataTable 初始化时，给 scrollY（在上述示例中为 100px）的值实际上并不重要，因为表格的滚动容器的尺寸会自动调整为所置入表格的容器大小。这是一个重要的点，因为定义表格高度的并不是 DataTable 本身，而是所置入的 DOM 容器元素。

在上述示例中，div 元素被用作表格的包装器，而 Javascript 用于调整容器大小。没有其他 Javascript 可告知 DataTables 它需要调整大小 - 这由 ScrollResize 插件自动确定，从而使初始化变得简单且提高脚本执行性能（请参阅下面的 实现 部分，了解实现方式）。

虽然你可能希望让最终用户能够调整表格的容器大小，但这种方法的真正优势是 DataTables 可以自动适应你已定义的布局

• 自动调整为全屏
• 使用 vh 单位动态调整大小

实现

与原始的 分页大小调整插件 一样，ScrollResize 需要知道何时发生了大小调整才能自动调整表格的大小。我们可以在 DataTables API 中为此提供并触发一个 Javascript 方法，但这不方便开发者，因为页面上的每次更新或重绘都需要调用该方法。最好能够自动确定何时需要执行此操作。

这样做的问题在于，浏览器仅在窗口大小更改时触发大小调整事件，而不触发 DOM 元素移动事件。（因为这样做效率极低）分页大小调整插件使用 object 知道何时调整了容器大小，但在 IE 中这样做会造成样式问题。ScrollResize 基本上使用相同的想法，但使用 iframe，它没有任何此类样式问题

        var that = this;
        var obj = $('<iframe/>')
            .css( {
                position: 'absolute',
                top: 0,
                left: 0,
                height: '100%',
                width: '100%',
                zIndex: -1,
                border: 0
            } )
            .attr( 'frameBorder', '0' )
            .attr( 'src', 'about:blank' );

        obj[0].onload = function () {
            var body = this.contentDocument.body;
            var height = body.offsetHeight;
            var contentDoc = this.contentDocument;
            var defaultView = contentDoc.defaultView || contentDoc.parentWindow;

            defaultView.onresize = function () {
                // Three methods to get the iframe height, to keep all browsers happy
                var newHeight = body.clientHeight || body.offsetHeight;
                var docClientHeight = contentDoc.documentElement.clientHeight;

                if ( ! newHeight && docClientHeight ) {
                    newHeight = docClientHeight;
                }

                if ( newHeight !== height ) {
                    height = newHeight;

                    // Resize has happened - trigger callback
                }
            };
        };

        obj
            .appendTo( host )
            .attr( 'data', 'about:blank' );

在代码中知道了何时进行了大小调整，我们只需更新 DataTables 的滚动容器（去掉页眉和页脚的高度），即可使其完全贴合容器。

基本实现，即将自动知道何时调整了容器元素的大小，几乎肯定地会加入 DataTables 2.0（更多新闻将在 2018 年发布），因为它可以概括许多问题，比如在可见的表格被隐藏时需要调用 columns.adjust()。

欢迎提供反馈

一如既往，我们非常欢迎改进和建议！此插件的代码托管在 GitHub 上。如果你对改进有任何想法，请发送拉取请求，或在 论坛 中展开新讨论。

新年快乐！