如何修复 bootstrap table 中的页脚值？

Question

我正在处理 bootstrap-table 的页脚和排序。一切正常，但在尝试将排序重置为默认值后，我在页脚中的总和设置为 0。

我尝试在调用 $table.bootstrapTable('destroy') 后重新加载 table 或编辑页脚但没有任何变化。

默认排序函数：

    setDefaultSorting() {
        let $table = this.getTable();

        //Remove sorting cookies, to delete saved sorting. 'getCookies' method will return current cookies
        $table.bootstrapTable('deleteCookie', 'sortOrder');
        $table.bootstrapTable('deleteCookie', 'sortName');

        //Recreate the table to remove current sorting
        $table.bootstrapTable('destroy');
        this.bootstrap(this.data);
    }

bootstrap 是一个调用 $table.bootstrapTable() 的函数：为了便于阅读，我删除了列


public bootstrap(data) {
        this.data = data;

        let $table = this.getTable();
        let id = this.id;

        $table.bootstrapTable({
            toolbar: '#toolbar',
            sortable: true,
            search: true,
            pagination: true,
            fixedColumns: true,
            pageSize: 10,
            pageList: [5, 10, 15],
            paginationPreText: "‹",
            paginationNextText: "›",
            classes: "table table-hover",
            columns: [
            ],
            data: this.useDefaultSorting(data), //When bootstrapping data on landing page, always use default sorting
            cookie: true,
            cookieIdTable: id
        });

        $table.on('sort.bs.table', (_e: any, _column: string, order: string) => {
            RMLandingPageTable.sortOrder = order;
        });

        $table.on('editable-save.bs.table', function (_e: any, column: any, row: IRMLandingPageGroup, _old: any, _$el) {
            var isRM = column === 'rmFreeText';
            var role = isRM ? ERole.RelationshipManager : ERole.CreditEmployee;
            var text = isRM ? row.rmFreeText : row.creditFreeText;
            RMLandingPageTable.freeTextChange.emit({ globalCustomerId: row.mainGlobalCustomerId, text, role });
        });

        // maxlength is not an option of x-editable, the following is a workaround for setting it to 20
        $table.on('editable-shown.bs.table', function (_e: any, _column: any, _row: any, _old: any, _$el) {
            $('.bootstrap-table-editable-cell input').attr('maxlength', 20);
        });

        this.calculateTotals(data);

        //I'm so sorry, needed for displaying the filter drop down when no results are in the table
        $(".bootstrap-table").css({ "min-height": this.minHeight });
    }

这里是计算总数的函数：



private calculateTotals(data) {
        let exposureString: string;   

        var total = Formatter.exposureFormatter(this.sum(data, exposureString)));

        var span = 7;

   this.footer = {
            columns: [
                { title: "", span: span, dataField: "" },
                { title: "Total:", span: 1, dataField: "totalTitle", align: "right" },
                { title: total, span: 1, dataField: "total", align: "left" }
            ]
        };

一切正常，除非我第二次尝试调用默认排序，然后总计显示为 0。但是，在调试中我可以看到，this.footer 设置了正确的值。

可能是什么问题？

谢谢！！

Answer 1

问题与 BootstrapTable.On init 有关，我正在创建显示零的临时页脚。在创建实际 table 之后，我用真正的页脚覆盖它，在销毁事件期间将其删除。您不能在不破坏自定义页脚的情况下破坏 table。解决方法是在销毁之前复制页脚，并在使用 jquery.

重新创建后追加回去

如何修复 bootstrap table 中的页脚值？

How to fix footer values in bootstrap table?

typescript

bootstrap-table