垂直捲軸調整

早在 2015 年，我為 DataTables 介紹了一個外掛程式，該程式能夠動態更改表格的頁面長度，使其適合容器內。當啟用分頁且停用捲軸時，這項功能運作良好，但 DataTable 的垂直調整也自然適用於捲軸。

在這篇文章中，我將介紹一個在啟用捲軸時適用於 DataTables 的等效外掛程式 - 最終結果如下所示

使用方式

使用 DataTables 的 ScrollResize 外掛程式非常簡單 - 在您的頁面上包含外掛程式的 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 上。如果您有任何改進的想法，請發送提取請求，或在論壇中開啟新的討論。

新年快樂！