SearchPanes 版面配置

您可以為 SearchPanes 定義自己的版面配置。這允許在您的頁面上包含 SearchPanes 時，有更客製化的體驗。

設定窗格的位置

透過使用 dom 屬性，您可以選擇窗格相對於主要 DataTable 出現的位置。當使用 dom 屬性時，SearchPanes 在 dom 屬性中以 P 字元作為別名。建議的版面配置和 dom 初始化如下

{
    dom: 'Pfrtip'
}

這將確保窗格放置在 DataTable 上方。如果您希望窗格出現在表格、分頁和資訊區段下方，則您將初始化如下

{
    dom: 'frtipP'
}

設定每一列的窗格數量

預設情況下，SearchPanes 在完整的桌面顯示器上會以每列三個窗格的寬度顯示，並且內建了響應式元素，可以根據螢幕寬度進行調整。如果您想覆蓋此預設值，您可以定義每個窗格在 SearchPanes 容器中每列顯示的數量，如下所示

{
    searchPanes: {
        layout: `columns-2'
    },
    dom: 'Pfrtip'
}

上面的初始化將允許窗格以每列 2 個窗格的寬度顯示。支援 6 個選項 - 分別從 1 到 6。

垂直顯示窗格

也可以透過操作 dom 屬性，將窗格垂直顯示在 DataTable 旁邊，如下所示

{
    searchPanes:{
        layout: 'columns-1'
    },
    dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'
}

這將在 DataTable 的左側顯示窗格。