Bootstrap-table: Footer rows for totals or custom operations

[luisapuyen]

Is it possible to implement footer rows which perform some kind of operation on all the elements of a column like an addition?

[dabros]

footerFormatter http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options
http://issues.wenzhixin.net.cn/bootstrap-table/#issues/639.html

Copied from another issues fiddle, untested but should show general approach:

$(function () {
    $('#table').bootstrapTable({
        idField: 'name',
        url: '/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/',
        showFooter: true,
        columns: [{
            field: 'name',
            title: 'Name'
        }, {
            field: 'stargazers_count',
            title: 'Stars',
            sortable: true,
            editable: true,
            footerFormatter: sumFormatter
        }, {
            field: 'forks_count',
            title: 'Forks',
            editable: {
                type: 'text'
            },
            footerFormatter: sumFormatter
        }, {
            field: 'description',
            title: 'Description',
            editable: {
                type: 'textarea'
            }
        }]
    });
    function sumFormatter(data) {
                var field = this.field;

                var total_sum = data.reduce(function(sum, row) {
                        console.log(sum);
                    return (sum) + (parseInt(row[field]) || 0);
                }, 0);
                return total_sum;
            }
});

[luisapuyen]

@dabros Thank you! I didn't notice it's in the documentation. Also I didn't know the reduce function (I would have used a bulky function instead), so your example comes in very handy :+1:

[luisapuyen]

By the way: Would it be possible to create a two lines footer, where the second line had merged cells in this fashion:

For instance, starting from 4 fixed columns with their corresponding sums in the footer, some way to add a second footer line in which columns 1 and 2 are merged in a cell that contains their total sum, and just the same for columns 3 and 4.

Is this possible in some way?

[dabros]

@luisapuyen - not a bad question, though it does seem very much outside-use-case so maybe not as is...

PR are always welcome if you want to look into the code and think up some ideas on maybe how to do it, we always happy to help proof or collab on code if you have an honest swing at it and it wont break anything else or overcomplicate too much

https://github.com/wenzhixin/bootstrap-table/blob/master/CONTRIBUTING.md#pull-requests

---

If not wanting to go that far, tbh the simplest workaround would prob be inserting that row using jquery direct inside onPostBody callback.

You would use whatever worked for you to determine which columns to merge ect, then call something like $('.fixed-table-footer table tbody').append($myPrepedRow).

The actual values could be either stored in local array and updated inside footerFormatter, or retrieved via a similar selector to above. Just look at http://issues.wenzhixin.net.cn/bootstrap-table/#issues/639.html and F12+inspect to see generated html.

That workaround would prob be the easiest way for you, though PR are always welcome, especially if you need to account for hidden columns and ect (several PR currently in works by myself and others regarding similar issues, so could maybe learn something from them)

[luisapuyen]

@dabros Thanks a lot for your tips! I will try to code it by myself, although most modern ninja-techniques in javascript like I've seen in the Bootstrap Table code are beyond my expertise yet. I will try anyway.