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.
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.
of 1
- Show/Hide Columns
- Col A
- Col B
- Col C
- Col D
Col A
|
Col B
|
Col C
|
Col D
|
---|---|---|---|
A1 | A2 | A3 | A4 |
B1 | B2 | B3 | B4 |
C1 | C2 | C3 | C4 |
D1 | D2 | D3 | D4 |
E1 | E2 | E3 | E4 |
of 1
- Show/Hide Columns
- Col A
- Col B
- Col C
- Col D
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.
url
string
Default: [empty]
Required. The URL to your server-side script that will handle the logic.
images
string
Default: images
Required. The relative path to the Compass Grid images folder.
hover
true/false
Default: true
When set to true, hovering over table cells will activate the .hover css class for css styling. The CSS classname for hover can be changed by changing the hoverClass option.
selectable
true/false
Default: true
When set to true, clicking on a cell “selects” it. We combine this in Compass with a checkbox for each row. The CSS classname for this can be changed by changing the selectableClass option.
sort
true/false
Default: true
Allows users to sort columns (although logic for this must be incorporated into server-side script).
striping
true/false
Default: true
Striping will alternate classes for table rows (default classes .odd and .even). CSS classes can be changed by altering oddClass and evenClass options.
resizable
true/false
Default: true
Setting to true allows users to resize columns. This is currently a little buggy, so use at your own risk. Request jQuery UI / Resizable to work.
toggle
true/false
Default: true
Setting to true allows users to toggle columns on or off. A “Show/Hide Columns” box is added automatically.
pager
true/false
Default: true
Whether you’re using pagination or not.
pagerBefore
true/false
Default: true
Set to true to show the “pager bar” above (before) the table.
pagerAfter
true/false
Default: true
Set to true to show the “pager bar” after the table.
paramsStart
string
Default: ?
A starting character for passing your server-side script information. Compass Grid defaults to ?foo=bar&this=that
paramsSeparator
string
Default: &
A character for separating your server-side key/value pairs. Compass Grid defaults to ?foo=bar&this=that
paramsSeparator
string
Default: =
A character placed between a key and a value in the url. Compass Grid defaults to ?foo=bar&this=that
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
Leave a comment below if you have any questions.