The HTML

The html file looks like this:

<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'My first grid'
  }); 
}); 
</script>
</head> 
<body> 
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
</body> 
</html>

The assumption that makes the above work is that the saved file is in the directory where you placed the jqGrid files. If it is not, you will need to change the pathing appropriately.

First, we need to include the files required to construct the grid. This is done between the <head> tags in the html document.

<head>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
…
</head>

The <link…/> tag loads the style sheet for jqGrid,
The first <script ../> tag loads the jquery library,
The second <script ../> tag loads the required jqGrid plugins,
The third and fourth <script ../> tags load the additional modules required for some functions, and
The last script tag is where we write the commands needed to construct the grid. A detailed description of this area appears below.

Between the <body> tags you define where you want to place the grid.

<body> 
…
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
…
</body>

The definition of the grid is done via the html tag <table>. To make our life easy it is good idea to give the table an id that is unique in this html document. The second step is to assign a class "scroll" so that we can use the style definitions in the CSS provided with jqGrid.
Cellspacing, cellpadding and border attributes are added by jqGrid and shoudl not be included in the definition of your table.

We want to use a paging mechanism too, so we define the navigation layer. This can be done with the commonly-used <div> tag. Giving the class "scroll" of the navigator specifies that we want to use the CSS provided with jqGrid. It is important to note that the navigation layer can be placed arbitrarily any place in the html document. Normally, and in this case, it is under the grid.

We use the jQuery document.ready function to run our script at the appropriate time. For more information on this, refer to the jQuery documentation.

The syntax for constructing the grid is:

jQuery('#grid_selector').jqGrid( options )

where:

grid_selector is the unique id of the grid table (list using our example above)
jqGrid is the plugin, and
options is an array, in our example several lines, of the information needed to construct the grid.

Let’s begin with the options array, which looks like this: (These options can appear in any order)

{
  url:'example.php',
  datatype: 'xml',
  mtype: 'GET',
  colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
  colModel :[ 
    {name:'invid', index:'invid', width:55}, 
    {name:'invdate', index:'invdate', width:90}, 
    {name:'amount', index:'amount', width:80, align:'right'}, 
    {name:'tax', index:'tax', width:80, align:'right'}, 
    {name:'total', index:'total', width:80,align:'right'}, 
    {name:'note', index:'note', width:150, sortable:false} ],
  pager: jQuery('#pager'),
  rowNum:10,
  rowList:[10,20,30],
  sortname: 'id',
  sortorder: 'desc',
  viewrecords: true,
  imgpath: 'themes/basic/images',
  caption: 'My first grid'
}

The settings and options used above are described here; listings of all settings and options can be found in API Methods and colModel API.

Property	Description
url	tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid
datatype	this tells jqGrid the type of information being returned so it can construct the grid. In this case we tell the grid that we expect xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods
mtype	tells us how to make the ajax call: either 'GET' or 'POST'. In this case we will use the GET method to retrieve data from the server
colNames	an array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas
colModel	an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API: name the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats index the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database -- this is server-side sorting, so what you pass depends on what your server expects to receive width the width of the column, in pixels align the alignment of the column sortable specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect
pager	defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of "pager", but any name is acceptable. Note that the Navigation layer (the "pager" div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer.
rowNum	sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data
rowList	an array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url
sortname	sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine
sortorder	sets the sorting order. This parameter is added to the url
viewrecords	defines whether we want to display the number of total records from the query in the pager bar
imgpath	the path to the images needed for the grid. The path should not end with '/'
caption	sets the caption for the grid. If this parameter is not set the Caption layer will be not visible

Having done this, we have now done half the work. The next step is to construct the server-side manipulation -- in the file pointed to in the url parameter in the grid.