技術標籤：前端bootstrapsjqueryjsbootstrap

bootstraps table 底部欄可移動

改寫 bootstrap-table.js 檔案:

主要實現程式碼:

// 在fBootstrapTable.prototype.fitFooter 函式裡改:
var $footerTable = this.$tableFooter.find('table');
// Footer隨bootstrap-table主體移動 wyz 20/11/19
this.$tableFooter.siblings('.fixed-table-body').off('scroll').on
 
('scroll', function () {
    var left = $(this).children('table').offset().left;
    var fleft = $(this).offset().left;
    var footMleft = left - fleft
    that.$tableHeader.css({
        "margin-left": footMleft + "px"
    });
    $footerTable.css({
        "margin-left"
 
: footMleft + "px"
    });
})

優化程式碼:

//在 BootstrapTable.prototype.fitHeader 中
this.$tableBody.off('scroll').on('scroll', function () {
    that.$tableHeader.scrollLeft($(this).scrollLeft());
    // 去掉此處foot控制 防止重複天際移動事件
    // if (that.options.showFooter && !that.options.cardView) {
    //     that.$tableFooter.scrollLeft($(this).scrollLeft());
 

    // }
});