Depending on where and how jqGrid for PHP is used, there are several approaches that can be used for placing the grid inside your page.

Approach #1: The script creates automatically the HTML placeholders and javascript needed by jqGrid

You can see in our Quick installiation guide that you can include the jqGrid PHP script in any place of the HTML document allowing the script to handle everything related to jqGrid itself. This is done using the parameters of the renderGrid method. Lets considers these parameters:

The first parameter is the ID of the table HTML element which will be used for the grid. The second parameter is the ID of HTML element the will be placed as a pager for the grid. These parameters may contain the jQuery selector "#" as the first character of the ID, but this is not required (jqGrid will do that automatically if not specified - e.g. both "#jqGridTable" and "jqGridTable" are allowed). If you do not wish to use pager in the grid, the second parameter should be set to an empty string. These HTML elements should be manually defined on the page, e.g.

<table id="jqGridTable"></table>
<div id="jqGridTableDiv"></div>

The third parameter $script tells the method if the javascript code needed for jqGrid should be autogenerated and automatically included in the file hosting the jqGrid instance. This will automatically create the javascript, for example:

...
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...

The sixth and seventh parameters tell the method if the HTML elements needed by the grid (table and pager) should be created by the grid itself or are already available on the page. This means that you do not need to explicitly create the HTML placeholders for the grid and pager, the jqGrid runtime will create them for you automatically if these paramaters are set to true, for example:

<?php
...
$grid = new jqGridRender($conn);
...

$grid->renderGrid("grid","pager",true,null,null,true, true, true);
?>

then the following content will be generated: 

...
<table id="grid"></table>
<div id="pager"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...

Approach #2: Table and pager are explicitly defined as HTML, but the javascript of the grid should be autogenerated

In a complex application the position of the grid in the HTML page should be fixed at a certain place. In this case the table and/or pager should exists in the DOM and be explicitly defined in the HTML. For this purpose the sixth and seventh parameters should be set to false and you need to manually define them in the HTML where needed.


<?php
...
$grid = new jqGridRender($conn);
...

$grid->renderGrid("grid","pager",true,null,null,false, false, true);
?>


...
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...
...
<table id="grid"></table>
<div id="pager"></div>

Approach #3: Using jqGrid from the JQuery.ready event

In the cases where you are already using the jQuery "ready" event (document.ready), it is more efficent to include the jqGrid script from within the event itself.

The code should look like this:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First PHP jqGrid </title> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
...
<?php include "grid.php";?>
...
});
</script>
</head>
<body>
...
...
<table id="grid"></table>
<div id="pager"></div>
...
</body>
</html>

The grid.php file should be (i.e the third, six and seven parameters should be set to false)

<?php
...
$grid = new jqGridRender($conn);
...

$grid->renderGrid("grid","pager",false,null,null,false, false, true);
?>

Approach #4: Loading jqGrid via AJAX

You can also load the jqGrid script via ajax . In this case the third parameter of the renderGrid method should be set to true. Below is example where the script is called on button click which then is removed from the DOM. The sixth and seventh parameters can be set to false if the elements (for table and pager) exist on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First PHP jqGrid </title> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
...
jQuery("#mybutton").click(function(){
   jQuery("#mycontent").load("grid.php");
   return false;
   jQuery(this).remove();
});
...
});
</script>
</head>
<body>
...
...
<button id="mybutton">Create Grid</button>
...

<div id="mycontent"></div>
...
</body>
</html>

and the grid.php file

<?php
...
$grid = new jqGridRender($conn);
...

$grid->renderGrid("grid","pager",true,null,null,true, true, true);
?>