jqGrid PHP Demo

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/tabs3.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';

    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    </script>
     
  </head>
  <body>
    <div style="margin-left:20px">
          <?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);