如何使用bootstrap-table-rails为表格添加顶部分页（保留底部分页）

方案一：使用bootstrap-table自带配置（无需额外依赖） #

bootstrap-table 本身支持同时显示顶部和底部分页，只需在初始化时添加 paginationPosition 参数并设置为 "both" 即可：

修改JS代码： #

$(document).bind("turbolinks:load", function(){
    var pageSize = Cookies.get("pageSize") || 50;
    $("#custom-table").bootstrapTable({
        pagination: true,
        pageNumber: Cookies.get("pageNumber"),
        pageSize: pageSize,
        sortName: Cookies.get("sortName"),
        sortOrder: Cookies.get("sortOrder"),
        paginationPosition: "both" // 新增配置，同时显示顶部和底部分页
    });
});

同步修改HTML的data属性（可选，若依赖data属性初始化）： #

table.table.table-striped.table-bordered.table-condensed data={toggle:"table", search:"true", pagination:"true", "page-size"=>50, "pagination-position"=>"both"}

该配置会自动生成两套完全一致的分页组件，且两者的分页状态会自动同步，无需额外处理事件逻辑。

方案二：手动复制分页组件（适配旧版本bootstrap-table） #

若你的bootstrap-table版本较旧不支持paginationPosition配置，可手动复制底部分页并同步事件：

1. 复制分页DOM并绑定同步逻辑：

$(document).bind("turbolinks:load", function(){
    var pageSize = Cookies.get("pageSize") || 50;
    $("#custom-table").bootstrapTable({
        pagination: true,
        pageNumber: Cookies.get("pageNumber"),
        pageSize: pageSize,
        sortName: Cookies.get("sortName"),
        sortOrder: Cookies.get("sortOrder")
    });

    // 复制底部分页容器到表格顶部
    var $bottomPagination = $("#custom-table").next(".fixed-pagination, .pagination");
    var $topPagination = $bottomPagination.clone();
    $("#custom-table").before($topPagination);

    // 点击顶部分页时同步触发表格分页动作
    $topPagination.find("a, button").on("click", function(e){
        e.preventDefault();
        var action = $(this).data("action") || $(this).attr("href").replace("#", "");
        $("#custom-table").bootstrapTable(action);
    });

    // 表格分页状态变化时，同步更新顶部分页的DOM结构
    $("#custom-table").on("page-change.bs.table", function(){
        $topPagination.html($bottomPagination.html());
    });
});

2. 样式调整（可选）：
   若顶部分页的间距或样式不符合预期，可添加CSS调整：

#custom-table + .pagination {
    margin-bottom: 10px;
}
#custom-table ~ .pagination {
    margin-top: 10px;
}

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