Skip to content

Footer Summary


Step1: Enable footer in grid options and connect grid load event.

$opt["footerrow"] = true;
$opt["loadComplete"] = "function(){ grid_onload(); }";

Step2: Write JS code to fill footer row.

// e.g. to show footer summary
function grid_onload()
    // where list1 is grid id
    var grid = $("#list1");

    // get sum of column `total`
    // can use other functions like 'sum, 'avg', 'count' (use count-1 as it count footer row).
    var sum = grid.jqGrid('getCol', 'total', false, 'sum');

    // set in footer under another column 'id'
    grid.jqGrid('footerData','set', {id: 'Total: ' + sum});

If using formatter in columns (like currency etc), you need to pass 4th param to false. e.g.

grid.jqGrid('footerData','set', { id: 'Total: €' + sum.toFixed(2) }, false);

For more advanced example, refer sample code below.


^ Top