垂直頁面調整

在許多網路應用程式和網頁控制面板中，通常需要讓顯示的佈局和內容自動縮放以適應使用者的瀏覽器，讓您可以呈現統一且流暢的介面。響應式技術在如何處理水平寬度方面已發展成熟，但垂直調整大小帶來了其獨有的挑戰。

在這篇文章中，我將介紹一個新的 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 上。如果您對改進有任何想法，請發送提取請求，或在論壇中開啟新的討論。

我特別希望解決的一個缺點是與 Responsive 的完全整合。雖然 Responsive 在大多數情況下可以在啟用此外掛程式的情況下正確運作，但顯示的子列將不會納入列數計算中，從而導致垂直對齊問題。這可能會透過在 Responsive 中引入新選項來解決，該選項會在快顯面板中顯示隱藏資訊，而不是在子列中顯示。