A Sortable Data Grid Using Ajax

The projects and demos in this section all use a MySQL database which holds a single table contact with records from a simplified contact manager application.



HTML tables are very limited in their abilities - we can't drag columns around, scroll through the data, or use any of the other facilities we have become used to in the data grids of desktop applications. Of all these shortcomings, perhaps the most significant for most people is the ability to sort data by ordering the grid using a particular column. This project combines Javascript, PHP and Ajax techniques to allow exactly that. Because the server is queried each time a sort is carried out, this technique could be extended to large datasets, unlike the traditional Javascript data grids, which need to load all the data when the page loads.



The grid below can be sorted by column using the up and down arrows.