During the development of PHP applications we frequently wanted to display large amounts of data to the user. Grids offer a user-friendly solution to display, filter and sort data. For the last years our weapon of choice has been jqGrid. JqGrid is a javascript library based on jQuery and is capable of transforming a simple html table tag to a dynamic table which you can easily filter and sort.

Building the necessary javascript for jqGrid can be cumbersome, the grid is very extensive and has many options. For this reason I decided to write an HTML helper for jqGrid which eases the use of jqGrid. A sample application including the helper can be viewed here and the source code is available here (for non-git users, click 'downloads' and you get a popup screen to download the source code).

If it's just the HTML Helper you want, without the samples, you only need to grab jqGrid.php from the sample application to get cracking.

Requirements

• jqGrid 3.6.5 or newer, you can download the latest version of jqGrid here, select at least the base modules: 'Grid Base', 'Formatter' and 'Custom'.
• jQuery 1.3 or newer, you can download the latest version from http://jquery.com
• jQuery theme, you can create a theme http://jqueryui.com/themeroller
• The PHP HTML Helper for jqGrid at github.

Installation & usage

After downloading the HTML Helper, you can get started immediately. The following code shows a simple example.

<?php echo Grid::create('myFirstGrid')
->addColumn(Column::create('movie_id'))
->addColumn(Column::create('title')
->setLabel('Title'))
->setUrl('datafeed.php')
->setRowNum(10)
->setRowList(array(10, 20, 30))
->setPager('mypager')
->setCaption('My first grid')
->setWidth(840)
?>

The Create method is always called first on the grid object, the parameter is the id of the given grid, the id of the generated table to be exact.

The HTML helper implements a fluent interface, which means after calling the create method you can call all other features, functions and events through method chaining. The sequence of calls does not affect the outcome.

With SetUrl("url") you can specify the url for the AJAX request to retrieve the necessary data to fill the grid. The sample application shows you how to handle the AJAX request.Sample application:

1. Download the sample application on github (download source) and unpack it
2. Create the mysql database, using the two sql files: sakila schema.sql-and-sakila data.sql (found in the sample application).
3. Change the database connection information datafeed.php
4. Go to index.php and you have a working example.

Good luck with the jqGrid HTML Helper.

PS: Robin van der Knaap has made a .NET C# version of HTML Helper jqGrid, which has inspired me to blog about the PHP varriant, you can find the .NET C # version is here.

Copyright (c) 2010 Webpirates. All source code in this article comes under the Lesser General Public License.