垂直页面贴合

在许多网络应用程序和基于网络的控制面板中，通常希望显示的布局和内容自动缩放以适应用户的浏览器，从而使您能够提供统一且精简的界面。响应式技术已经很好地发展，用于处理宽度水平，但垂直调整带来了自己的挑战。

在这篇文章中，我将介绍 DataTables 的一个新插件，它会自动改变表格的分页长度以适应给定的垂直区域。DataTables 的实际界面非常简单（仅使用 page.len() 方法和 draw()），但了解何时改变分页长度非常有趣，所以我还会讨论所用技术。

如下所示，使用插件的演示。对于本演示，我在表格周围创建了一个可以点击并拖动的可调整大小的框，结果是表格的分页长度会自动改变以适应框

使用

使用此插件非常简单 - 从 DataTables CDN 中包含您页面中的页面调整大小插件

然后从以下两个选项中选择一个，为您的表格启用此功能

选项 1：将 pageResize 选项添加到您的 DataTables 初始化

$('#example').DataTable( {
    pageResize: true
} );

选项 2：将类 pageResize 添加到您的 HTML 表格 - 例如

<table id="myTable" class="display pageResize">
    <thead> ... </thead>
    <tbody> ... </tbody>
</table>

CSS

页面调整大小插件无需任何特定 CSS，但您可能希望使用 CSS 来隐藏 DataTables 默认显示的分页长度控件

div.dt-length {
    display: none;
}

隐藏页面长度控件的另一个选项是使用 layout 选项。

此外，在 IE 中，您会发现有一个无法使用 CSS 删除的边框。不幸的是，解决此问题的唯一方法是在包装元素的背景颜色（即定义 DataTables 应占用的高度的元素）中使用纯色

#myContainer {
    background-color: white;
}

要求

• 分页必须被启用 (paging - 它在 DataTables 中默认启用)
• 页面长度更改必须被启用 (lengthChange - 再次说明它默认启用)
• 每行必须等高 - 如果您正在使用 DataTables 默认样式表，则向您的表格添加类 nowrap。这是为了使拟合计算快速且高效。
• DataTable 所在的容器元素必须具有定义的高度，表格必须填充该高度（高度可以是可变的，例如 vh CSS 单元）。

工作原理

此插件的 代码很小 - 仅 4K 未压缩，因此您可以浏览代码并很快理解它的工作原理。快速浏览一下：它计算容器中可用的高度，移除表格控件、页眉和页脚的高度，然后基于行高度计算剩余空间中可以显示多少行。最后，使用 page.len() 设置表格长度，并使用 draw() 绘制。

当我们考虑代码如何知道何时调整大小时，就会出现一个有趣的部分。您会注意到在上面的演示中，不需要窗口调整大小就可以重新绘制表格，也不需要 API 调用来告诉组件它已调整大小。

因为只有窗口对象有调整大小事件，我们不能仅仅监听容器元素上的事件，但我们可以使用 object 标签 来创建新的 HTML 文档、将其插入到容器元素中，然后监听它的调整大小事件！object 设置为适合容器，因此它触发的任何调整大小事件都是主机节点大小更改的结果。

这个代码也很简单

var obj = $('<object/>')
    .css( {
        position: 'absolute',
        top: 0,
        left: 0,
        height: '100%',
        width: '100%',
        zIndex: -1
    } )
    .attr( 'type', 'text/html' )
    .attr( 'data', 'about:blank' );

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

    this.contentDocument.defaultView.onresize = function () {
        var newHeight = body.offsetHeight;

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

            // Resize has occurred - do something!
        }
    }
};

obj.appendTo( host );

这个想法非常有用，如果在该插件中被证明是成功的，我将考虑将其包含在 DataTables 核心程序中，因为它会解决一些问题，例如当隐藏滚动表格变为可见时需要调用 columns.adjust()，手动更新 FixedColumns 以调整大小，以及其他常见问题。

欢迎提供反馈

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

我特别希望解决的一个缺点是与 自适应 完全集成。虽然大多数情况下，自适应与启用该插件后会正确操作，但变为可见的子行不会在行数计算中得到考虑，这会导致垂直对齐问题。通过引入自适应的新选项来解决此问题，以在弹出面板中显示隐藏信息，而不是在子行中显示，这一点很可能会得到解决。