Building a Pageable and Sortable Ajax Enabled DataGrid with PHP5 and PDO

Written By: Jay

- 20 Dec 2006 -

Description: This tutorial explains 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.

1. Setting Up AjaxAgent
2. Building the Data Grid
3. Data Grid Navigation

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.

Part 1: Setting Up AjaxAgent

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

include_once('agent.php'); 
$agent->init();

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 to 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 and html element that will display the grid.

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

 id='ajaxgrid1'>