function dibujaGrid(idTabla, myControls, colNamesParam, colModelParam,
captionTitle, Width, Height, Filtro, Footer) {
// Grid configuracion
jQuery("#" + idTabla).jqGrid({
datatype : "json",
scroll : true,
loadtext : 'Cargando...',
colNames : colNamesParam,
colModel : colModelParam,
width : Width,
height : Height,
footerrow : Footer,
shrinkToFit : true,
hiddengrid : false,
hidegrid:false,
viewrecords : true,
rowNum : 1000,
caption : captionTitle,
autowidth: true,
footerrow : true
});
// Colocamos un valor al Footer
var jsontext = '{"id":"1"}';
var ObjectJSON = JSON.parse(jsontext);
$("#" + idTabla).jqGrid('footerData', 'set', ObjectJSON);
}
jQuery(document).ready(function(){
var myControls = new Array('id','empresa','TotalRecibidos');
var colNameParams = ['Name ID','Name Empresa','Name Total'];
var colModelParam = [
{name:myControls[0],width: 100,sortable:false},
{name:myControls[1],width: 83,sortable:false},
{name:myControls[2],width: '100%',sortable:false,align:'center'}
];
dibujaGrid("bloque1", myControls, colNameParams, colModelParam, "Ejemplo footer como subHeader",544,220,false,false);
//Con esto hacemos que el row de Footer pase al header
$('#gview_bloque1 > div.ui-jqgrid-sdiv').css({
"border-bottom-style":"solid",
"border-bottom-color":"#a6c9e2",
"border-bottom-width":"2px"
}).insertBefore($('#gview_bloque1 >div.ui-jqgrid-bdiv'));
});
<table id="bloque1"></table>
External resources loaded into this fiddle: