如何在JTable中添加页脚行

Question

How to add footer row in Jtable , i am using jTable 2.4.0 version js files and mvc 4.

Reference

Samir you can use the jquery.jtable.footer.js jtable extension from https://github.com/gbisheimer/jtable/tree/master/lib/extensions .

and configure you column for footer as shown below

           Balance: {
                    title: 'Balance',
                    width: '70',
                    create:false,
                    edit: false,
                    display: function (data) {
                            return "£ " + data.record.Balance;
                    },
                    footer: function (data) {
                        var total = 0;
                        $.each(data.Records, function (index, record) {
                            total = Number(record.Balance);
                        });
                        return ("£"+total.toFixed(2));
                    }
                }

Answer 1

Am using footer.js file

https://github.com/sheryever/jtable/blob/master/lib/extensions/jquery.jtable.footer.js

see more jtable extension

https://github.com/sheryever/jtable/tree/master/lib/extensions

Answer 2

I have implemented this for my jtable and came across an issue with hidden columns and the footer fields not lining up correctly. I specifically include the ID column as the first column within the table but set its visibility to hidden within the jtable definition.

I overcame this with a couple of minor edits (one to the class file and one to the base jtable file, I am not sure if this could be rolled into the class file to make it more complete and not be broken by base class updates)

modified class extension file:

_createFooterCellForField: function (fieldName, field) {
        var style = "";
        if(field.visibility == 'hidden') style = ' style="display: none;" ';
        return $('<th class="jtable-column-footer" '+style+'>' +
            '<div class="jtable-column-footer-container"><span class="jtable-column-footer-text"></span></div></th>');
    }

This still puts a footer table cell into the DOM but hides it should the column be hidden from initial configuration

modified base class file:

changed:

.find('>thead >tr >th:nth-child(' + columnIndexInTable + '),>tbody >tr >td:nth-child(' + columnIndexInTable + ')')

to become:

.find('>thead >tr >th:nth-child(' + columnIndexInTable + '),>tbody >tr >td:nth-child(' + columnIndexInTable + '),>tfoot >tr >th:nth-child(' + columnIndexInTable + ')')

twice within the base class to hide/show the footer cell as well as the rest of the column if you select the column via the right click context menu. These edits were done within the _changeColumnVisibilityInternal: function (columnName, visibility) { function around line 4500

Also in the example above your total formula is slightly incorrect, should be total += Number(record.Balance);