How to fix footer values in bootstrap table?

Question

i am working on bootstrap-table with footer and sorting. Everything works fine, but after trying to reset sorting to default value, my sum in footer is set to 0.

I have tried reloading table or editing footer after calling $table.bootstrapTable('destroy') but nothing changes.

Function for default sorting:

    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 ir a function which calls $table.bootstrapTable(): i Have removed columns for readability

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 });
    }

And here is the function for calculating totals:

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" }
            ]
        };

Everything works fine, unless I am trying to invoke default sorting second time, then total is displayed as 0. However, in debugging I can see, that this.footer is set with correct value.

What could be the issue?

Thanks!!

Answer 1

Problem is related to BootstrapTable.On init I was creating temp footer which was displaying zeroes. After creating actual table I was overlying it with real footer which gets removed during Destroy event. You can't destroy table without destroying custom footer. Workaround is to copy footer before destroying and appending back after recreating using jquery.