Compass DataGrid is an ajax-driven data grid that relies on server-side code for its data. Rather than manipulating an existing table or breaking it down into multiple pages, Compass DataGrid takes an empty table and populates it by connecting to a server-side url via ajax. As users interact with the grid, the grid talks with the server-side script letting it know what the user is requesting. The server-side script then provides JSON encoded data for the plugin to update the table.
Compass Datagrid will work with any server-side programming language. However, the example in the download is in PHP.
Update 11/11/09 9:52AM PST
Due to renaming the function, the demo.html included in the original download was not working. The zip file has been updated and should now work. Just be sure to test on a server with PHP enabled.
Note: You'll need PHP working for this demo to work. Also Note: The data for this table is hard-coded for illustrative purposes. This was done intentionally since the server-side code works much better dynamically with a database or other storage mechanism. **Sorting/pagination will not work in the demo.
sortField: The table column that the user is sorting by. The value here will be the id for the column that you specified in your server-side code.
sortOrder: The order the user wants to sort. Either asc or desc.
show: The number of results to return to the user (i.e 10 at a time)
These checks were left out of the sample php file, so you'll need to work them into your code.
You can provide search filters with your datagrid to do things like live filtering (as the user types) or updating the grid based on the value of a select list. You'll have to handle the logic for this on the server-side, but the Compass Datagrid will pass all of the necessary info to your server-side script each time it's loaded. Here's how it works:
You create a div with an id of filterbox, and place input and select elements in there. Then, you use bind keyup/change events to those form elements that will trigger a reload of the Compass Datagrid. Compass Datagrid will automatically pull the values from your filters and send them to your server-side script. Here's one way you could bind:
where options holds a list of options for the datagrid.
Keep in mind that if you are using a question mark for the value of the paramsStart option (currently the default), using filters (line 600 in the js file) will break because it appends a question mark to your url which already has a question mark. You'll need to update the js file to deal with this (I'll put out an updated fix shortly).