The title says it all. In this tutorial I'll explain how to build a dynamic data grid for browsing data. This is not a perfect data grid solution that can be just dropped onto a page, it requires a bit of hands on tweaking, but the end result is pretty amazing.

This code uses AjaxAgent and PHP5's PDO DataBase Functions. I really like using PDO but if you're using something else you can very easily modify the code.

Source Code & Demo

Part 1: Setting Up AjaxAgent
Start by creating a new page and include the AjaxAgent library and initialize the server agent like this:

Now create a JavaScript block that will invoke the server function like this:

By placing returnPageData(1,'ProjName','DESC') in the window.load function we are invoking the data grid for the first time with some default parameters.
returnPageData(The Row Number to Start At,The Column to Order the Data By,The Direction of the Order: ASC or DESC)

Once we are inside the function returnPageData we then invoke the agent.call by passing it the page with the PHP code ajaxFunctions.php, the PHP function showDataGrid, the callback returnPageData_Callback and lastly some parameters offset,orderby,dir,perpage. The perpage parameter is optional

When the returnPageData_Callback function is invoked we pass the ajax response to and html element that will display the grid.

Last on the page is the element that grid will be bound to:

Be sure to place all of this code in it's own .php page and then create a new page called ajaxDataGrid.php.

Part 2: Building the Data Grid
This is where things get a little harder so stay sharp. The ajaxDataGrid.php contains 5 functions that make up the datagrid.

• showDataGrid - returns the DataGrid and Navigation
• getProjects - returns an array of Project Data
• pc_indexed_links - manages the Grid Navigation
• pc_print_link - prints the Grid Navigation Links
• phpDataGrid - creates and returns the DataGrid

The only function called by us is showDataGrid which we will pass some parametes the JavaScript function returnPageData. All of the other functions are called by showDataGrid so we do not need to worry about them just yet.

Part 2.1: showDataGrid
This is the main function that does all of the work for us:

View the showDataGrid() code

Part 2.2: getProjects & SQL
For this tutorial I am using my Projects DataBase from the gotfoo labs:

Here is a cut-down version of the Projects Table with some default data.

View the Projects SQL code

And here is the PHP code that gets the Project Data:

View the getProjects() code

The most important parameters are the $per_page which sets the LIMIT and the $offset sets the position to start gathering data at.

Part 2.3: Data Grid Navigation
I'll admit right up front that I found the data navigation code in the PHP Cookbook 2ed but I modified the code to allow for the $orderby, $dir and $per_page parameters.

View the Navigation code

Part 2.4: The Data Grid
This is the heart and soul of the whole matter.
For the PHP function phpDataGrid we will pass in 4 parameters: and array of data, an array of columns, the page offset and the number of records per page.

In the first for loop we are looping over the $columns array to create the columns & headers as well as links to sort the column.

Once we are past that we have a foreach loop which a) loops over the $dataobjects array and then loops over the columns. In the column loop we are using the $column['columnName'] a.k.a the SQL column name to get a value of the $dataobjects array.

View the phpDataGrid() code

Once all of the rows have been processed we're done and we return the DataGrid back to the calling function, showDataGrid.

Part 2.5: Very Important Quirk/Hack
I went crazy this week because I had AgaxAgent working on one site but not another. I spent hours trying to get the DataGrid to work. Then I found the answer.
At the very bottom of ajaxDataGrid.php we need to include the AjaxAgent library and initialize it again. I don't know but if it's not there you'll get nothing but errors.

We're done!!

Demo