• Home
• Technical Resources
• jQuery
• Compass Datagrid

Compass Datagrid for jQuery

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.

Skip to Download »

Grid Demo

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.

Usage

In the head of your page...

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.compassdatagrid.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".browseTable").compassDatagrid({
			images: 'images/',
			url: 'pageData.php'
		});
	});
</script>
	

In the body...

<table class="browseTable"><tbody><tr><td></td></tr></tbody></table>
		
<!-- If you are using the Resizer -->
<div id="ctResizer"></div>

Options

Take a look at the uncompressed source code for all the options. We'll cover the main ones here.

Server-Side Code

Your server side code should check for various data being sent by the plugin. A sample request might look like this:

pageData.php/?page=3&sortField=title&sortOrder=asc&show10;

Here's what this means:

Page: The page the user is requesting

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)

Note

These checks were left out of the sample php file, so you'll need to work them into your code.

Using Filters

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:

$(document).ready(function() {
	$("#filterbox").find("input").keyup(function() {
		$(".compassTable").ctLoad(options);
		$(this).focus();

		return false;
	});

	$("#filterbox").find("select").change(function() {
		$(".compassTable").ctLoad(options);
		$(this).focus();

		return false;
	});
});

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).

License

Dual licensed under the MIT and GPL licenses:

        http://www.opensource.org/licenses/mit-license.php
        http://www.gnu.org/licenses/gpl.html

Download

You can download this plugin here. Included is the source code (20KB), a minified version (16KB), the stylesheet (8KB), and a demo.

Dependencies

• jQuery 1.3+
• livequery

Leave a comment below if you have any questions.

Comments