jQuery Compass-Datagrid

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.

Usage

HTML

<table class="browseTable"><tbody><tr><td></td></tr></tbody></table>

<!-- If you are using the Resizer -->
<div id="ctResizer"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery.compassdatagrid.min.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $(".browseTable").compassDatagrid({
      images: 'images/',
      url: 'pageData.php'
    });
  });
</script>

Server-side (PHP)

The server-side script must return a JSON string, in the following format:

array(
  'pager' => array(array(
    // The Page Number being returned
    'page' => (int) 1 ,
    // The Maximum Page Number ( ceil( $totalRows / $perPage ) )
    'pages' => (int) 10 ,
    // The Number of Matching Rows
    'found' => (int) 95 ,
    // The Index of the First Row
    'displayingStart' => (int) 1 ,
    // The Index of the Last Row
    'displayingEnd' => (int) 10
  )) ,
  'headings' => array(
    array(
      // The ID for the first column
      'id' => (string) 'row' ,
      // The Title for the first column
      'display' => (string) 'Row #' ,
      // (Optional) The CSS Width for the column
      'width' => (string) '25%' ,
      // (Optional) If Sorted by this column, 'sort-[direction]'
      'sort' => (string) 'sort-asc'
    ) ,
    ...
  ) ,
  'rows' => array(
    array(
      // The ID-indexed array of values for the row
      '[id]' => (mixed) '[value]' ,
      ...
    ) ,
    ...
  )
);

Options

Javascript

Option	Type	Values	Purpose
url (required)	string	Any (Default:empty)	The URL to your server-side script that will handle the logic.
images (required)	string	Any (Default:"images")	The relative path to the Compass Grid images folder.
hover	boolean	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.
hoverClass	string	Any (Default:"hover")	The class to apply to table cells when hovered over.
selectable	boolean	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.
selectableClass	string	Any (Default:"selected")	The class to be applied to a cell when clicked.
sort	boolean	true/false (Default:true)	Allows users to sort columns (although logic for this must be incorporated into server-side script).
ajax	boolean	true/false (Default:true)	Use AJAX to collect the data to fill the table.
striping	boolean	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.
oddClass	string	Any (Default:"odd")	The CSS class to apply to odd-numbered rows.
evenClass	string	Any (Default:"even")	The CSS class to apply to even-numbered rows.
resizable	boolean	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.
resizeOpacity	double	0-1 (Default:0.65)	The opacity of the element when resizing.
resizer	string	Any (Default:"ctResizer")	The element to use when resizing.
toggle	boolean	true/false (Default:true)	Setting to true allows users to toggle columns on or off. A "Show/Hide Columns" box is added automatically.
toggleHolder	string	Any (Default:"toggleHolder")	TBA.
pager	boolean	true/false (Default:true)	Whether you're using pagination or not.
pagerBefore	boolean	true/false (Default:true)	Set to true to show the "pager bar" above (before) the table.
pagerAfter	boolean	true/false (Default:true)	Set to true to show the "pager bar" after the table.
paramsStart	string	Any (Default:"?")	A starting character for passing your server-side script information. Compass Grid defaults to ?foo=bar&this=that
paramsSeparator	string	Any (Default:"&")	A character for separating your server-side key/value pairs. Compass Grid defaults to ?foo=bar&this=that
paramsJoin	string	Any (Default:"=")	A character placed between a key and a value in the url. Compass Grid defaults to ?foo=bar&this=that
perPage	integer	0+ (Default:15)	The number of rows to show per page.
perPageOptions	array (of integers)	[0+,0+,...] (Default:[10,15,20,25,30,40,50,100])	Options for the number of rows to show per page.

Server-side Options

Option	Type	Values	Purpose
page	integer	1+	The page to be returned.
sortField	string	Any	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	string	"asc"/"desc"	The order the user wants to sort.
show	integer	1+	The number of rows to return.

Dependencies

• jQuery v1.3.2+
• jQuery Live Query

Licencing

• Initial code Copyright 2009 Cristian Graziano
• Dual licenced under MIT Licence and GPL Licence