APEX 21.2中如何调整Interactive Grid分页控件位置

在APEX 21.2中，Interactive Grid（简称IG）没有提供像Interactive Report那样直接调整分页控件位置的属性设置，要实现以下两个需求，需要通过JavaScript结合CSS来完成：

需求1：将分页控件移动至左上角 #

实现步骤： #

1. 先确认你的IG组件的静态ID（示例中用emp_ig，实际替换成你自己的IG静态ID）
2. 在页面的Function and Global Variable Declaration中添加以下JavaScript代码：

function moveIGPaginationToTopLeft() {
    // 获取IG底部的分页容器
    const paginationContainer = document.querySelector('#emp_ig .a-IG-bottomBar .a-IG-pagination');
    // 获取IG顶部工具栏容器
    const topToolbar = document.querySelector('#emp_ig .a-IG-topBar');
    
    if (paginationContainer && topToolbar) {
        // 把分页容器移到顶部工具栏最左侧
        topToolbar.insertBefore(paginationContainer, topToolbar.firstChild);
        // 移除底部空的工具栏（可选，避免底部留空白）
        const bottomBar = document.querySelector('#emp_ig .a-IG-bottomBar');
        if (bottomBar && bottomBar.children.length === 0) {
            bottomBar.style.display = 'none';
        }
    }
}

3. 给页面添加一个Page Load动态动作，选择Execute JavaScript Code动作，调用上面的函数：

moveIGPaginationToTopLeft();

4. 在页面的Inline CSS中添加样式，调整分页控件的间距和分隔线：

#emp_ig .a-IG-topBar .a-IG-pagination {
    margin-right: 1rem;
    margin-left: 0.5rem;
    border-right: 1px solid #e0e0e0;
    padding-right: 1rem;
}

需求2：复制分页控件到顶部（保留原底部的分页） #

实现步骤： #

1. 同样先确认IG的静态ID（示例用emp_ig）
2. 在页面的Function and Global Variable Declaration中添加以下JavaScript代码：

function duplicateIGPaginationToTop() {
    const paginationContainer = document.querySelector('#emp_ig .a-IG-bottomBar .a-IG-pagination');
    const topToolbar = document.querySelector('#emp_ig .a-IG-topBar');
    
    if (paginationContainer && topToolbar) {
        // 深克隆分页容器，保留原控件的事件绑定
        const clonedPagination = paginationContainer.cloneNode(true);
        // 将克隆的分页控件插入到顶部工具栏最左侧
        topToolbar.insertBefore(clonedPagination, topToolbar.firstChild);
        
        // 重新初始化克隆后的分页控件，确保功能正常
        const igWidget = apex.region('emp_ig').widget().interactiveGrid();
        const gridView = igWidget.getViews('grid');
        gridView.pagination$ = clonedPagination;
        gridView.initPagination();
    }
}

3. 添加Page Load动态动作，执行以下代码：

duplicateIGPaginationToTop();

4. 同样添加CSS样式调整布局：

#emp_ig .a-IG-topBar .a-IG-pagination {
    margin-right: 1rem;
    margin-left: 0.5rem;
    border-right: 1px solid #e0e0e0;
    padding-right: 1rem;
}

注意事项： #

• 所有代码中的emp_ig必须替换为你实际使用的IG静态ID
• 如果IG是动态加载的（比如在模态窗口、Tab页签中），不要在Page Load时调用函数，要在IG加载完成的事件中触发（比如apexafterrefresh事件）
• 完成后测试分页控件的所有功能：页码跳转、每页条数选择、上/下页按钮是否正常工作

内容的提问来源于stack exchange，提问作者DevDaniels