Put a MySQL Database on the Web:
Step by Step Tutorial

Step #4: Ajax Data Grid Feature Tour

Data Grid functionality is provided by an enhanced version of FlexiGrid which provides desktop-application like data grids in your web application.  It provides functionality that allows you to filter / sort / order / page data, resize and reorder columns as well as provide links to add / edit / delete records. 


To filter data, first select the field you wish to filter by in the drop-down list. 

Filter Field Dropdown

Next, select the kind of match you wish to make - the specific options will depend on the type of field you are matching against - e.g. there is no "Begins With" option for integer fields (unless it is a lookup field in which case it matches against the text lookup value). 

Filter Criteria

Finally hit the "View Matching Records" button or in many cases simply hit the return key. 

View Matching Records Button

The grid will be updated with the matching data.

Results Grid

You can add as many filters as you wish:

Multi Filters

To remove a filter simply click the "X" button beside the filter you wish to remove

Remove Filter


Data can be sorted on multiple columns.  When clicking on an unsorted column header it will first sort that column in ascending order.  Click it again and it will sort it in descending order.  Click it once more and it will return to being unsorted. 

The data will be sorted in the order that you select the columns. For example supposing we wanted to sort films by Rental Rate in Descending order (i.e. the most expensive first) then by Replacement Cost in Ascending order (i.e. the least expensive first). 

Click "Deselect Selected Columns" button to clear any currently selected sorting. 

Deselect Sort Columns Button

Click on Rental Rate heading twice (once to make it Ascending, second time to make it Descending), then click on Replacement Cost once to make it Ascending. 

Sort Results

You will see that the most expensive rentals have gone to the top (4.99) within that the cheapest replacement cost (9.99) films are shown first. You can sort by as many columns as you wish.


By default only the first 20 matching records are displayed.  In order to change the number of records per page simply select the option in the records per page dropdown list on the pager at the bottom of the grid.

To view further pages of data click the forward / back buttons of the pager or enter the page number directly and hit the return key. 

Paging Control


To export data as a PDF, Excel or Word Document simply filter and order the data then click the appropriate button in the Export All section at the bottom of the grid. btw, "All" refers to all pages.

Resizing Columns

To make a column wider or narrower, click on the right edge of the column and drag it to the size you require. 

Resize Column

Changing Column Order

To change column order simply click on the column header and drag it to where you would like it to appear, using the blue arrow for guidance. 

Reorder Column

Deleting Data

1 or more records can be deleted by clicking on the row(s) to highlight them then clicking the "Delete" button.  If record(s) in other tables are dependant on a particular record then it is marked with an "*" to denote that it cannot be deleted.  (In the case of the Film table all the films exist in the Inventory so would have to be deleted from there before they can be deleted from the film table).

Delete Record

Editing Data

A record can be edited by either double-clicking on it, or a single click to highlight it then pressing the "Edit Selected Record" button. 

Edit Record

Adding Data

To add a new record simply click the "Add Record" button. 

Add Record

You should now be familiar with the workings of the Data Grid, now move on to the next section Step #5: Ajax PHP Forms Feature Tour.