You can show a static footer for each column, which is always visible on scrolling. In order to show a footer, just set the footerrow to true.
Each column has a property called Footer Value. It is a string property and you can set it to any value you need
using the callGridMethod with footerData (see the example)
If you need to use formula (like sum, count, average, min, max, etc) - you can use the available property
summarry rows. This is array, which is passed to the renderer. The first argument is the name
corresponding to the name in colModel, the second argument is array which describes to
which field from query should be applied the formula. In this case we set SUM.
It can be any database valid function which accept single argument
For detailed implementation, please take a look at the PHP source code tab.
<?php
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<script src="../../../../js/jquery.min.js" type="text/javascript"></script>
<script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.jgrid.defaults.width = "700";
</script>
<script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<br/>
<?php tabs(array("grid.php"));?>
</body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, RequiredDate, ShipName, ShipCity, Freight FROM orders';
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>10,"rowList"=>array(10,20,130),"sortname"=>"OrderID"));
// Enable footerdata an tell the grid to obtain it from the request
$grid->setGridOptions(array("footerrow"=>true,"userDataOnFooter"=>true));
// Change some property of the field(s)
$grid->setColProperty("RequiredDate", array("formatter"=>"date","formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")));
// At end call footerData to put total label
$grid->callGridMethod('#grid', 'footerData', array("set",array("OrderID"=>"Total with very very big text:")));
// Set which parameter to be sumarized
$summaryrows = array("Freight"=>array("Freight"=>"SUM"));
$code = <<<MYCODE
setTimeout(function(){
// set the text in the first column
// remove the formated style
$('tr.footrow','.ui-jqgrid-ftable').removeClass('footrow-ltr');
var styles= {'border-right-width': "1px", "border-right-color": "inherit", "border-right-style": "solid"};
// add the style only to a cells with sums
$('tr.footrow td:gt(2)').each(function(){
$(this).css( styles );
});
// make the long text visible in the first cell
$('tr.footrow td:eq(0)').each(function(){
$(this).css( 'overflow','visible');
});
},50);
MYCODE;
$grid->setJSCode($code);
$grid->renderGrid('#grid','#pager',true,$summaryrows , null, true,true);