Overview

Datagrids don't have to be difficult to use anymore - say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. It's easy to get started - read on below, or check out the Example Pages.

Examples

  1. Default Ingrid. All the bells and whistles
  2. Ingrid, tinier, with paging and column sorting turned off
  3. Set a total row value, Ingrid calculates total pages available.

How to Use

Part 1 - Setup

  1. Ingrid uses the sugary sweetness only found in your latest version of JQuery. You'll just need two files to get Ingrid working in your site/app. 
    <script type="text/javascript" src="js/jquery-1.2.js"></script>
<script type="text/javascript" src="js/ingrid.js"></script>
  2. Include the Ingrid CSS (or roll your own). 
    <link rel="stylesheet" href="css/ingrid.css" type="text/css" media="screen" />
  3. Check the CSS and make sure the images are properly referenced. For the default Ingrid style, there are 12 images in all you'll need.
    4. ../img/load-bg.png
../img/indicator_web20_working.gif
../img/grid-hrow.gif
../img/grid-split.gif
../img/sort-asc.png
../img/sort-desc.png
../img/sort-none.png
../img/page-bg.gif
../img/page-first.png
../img/page-prev.png
../img/page-next.png
../img/page-last.png
../img/grid-loading.gif
../img/grid-loading-done.gif

Part 2 - Activate

  1. Dump a table onto your page. Make sure it includes a <thead> and <tbody> elements. It should look like this: 
    <table id="table1">
 <thead>
  <tr>
   <th>Col 1a</th>
   <th>Col 1a</th>
   <th>Col 1a</th>
   <th>Col 1a</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
 </tbody>
</table>
  2. Include the jQuery special sauce in the head 
    <script type="text/javascript">
$(document).ready(
	function() {
		$("#table1").ingrid({ 
			url: 'remote.html',
			height: 350
		});
	}
); 
</script>
  3. Nice. Now you're using Ingrid.

Part 3 - Server Side

  1. Create a page that Ingrid can retrieve data from. It should spit out HTML that looks similar to the sample above (same number of columns, of course.) Make sure to include a <tbody> tag. Here's some sample PHP code: 
    <?php
$rows = 25;
$str  = '';
while (list($k, $v) = each($_GET)) {
	$str .= $k . '=' . $v . ', ';
}
?>
<table>
<tbody>
<?php
for ($i=0; $i<$rows; $i++) {
?>
<tr>
<td><?= $_GET['pg']; ?>:<?= $i; ?>:1 [GETs: <?= $str; ?>]</td>
<td><?= $_GET['pg']; ?>:<?= $i; ?>:2</td>
<td><?= $_GET['pg']; ?>:<?= $i; ?>:3</td>
<td><?= $_GET['pg']; ?>:<?= $i; ?>:4</td>
</tr>
<?php
}
?>
</tbody>
</table>
  2. That's it brohemian.

Download

Currently on Github

Legacy

Prior to moving to Github in 01/2014, changes were tracked at Google Code.

Questions

What are all the moving parts?
Ingrid's got 3 main parts: a header, a body, and a paging control.
The header is a table with <th>'s as columns; the body is a table nested in a scrollable div; the paging control is a plain old div with links styled as buttons.
If that doesn't help, please consult this crude sketch that attempts to illustrate Ingrid.
How does the server-side script work?
Ingrid passes a couple different params to the server, depending on how it's configured. These params are simply passed to a page that you specify (PHP, ASP, JSP, etc, doesn't matter). For example, here's some of the parameters:

page=2 (page number)
sort=0 (column id to sort on, 0 is first column)
dir=desc (direction of sort, asc or desc)

So... in the examples on this website, if ingrid passed all these params, the URL would look like:

http://reconstrukt.com/ingrid/remote.php?page=2&sort=0&dir=desc

And this page builds & executes the SQL query based on these query string params, then just spits out an html <table>.
I think I saw Ingrid on Del.icio.us. Did I?
You most certainly did! Thanks to everyone's diligent bookmarking, Ingrid spent some time gracing the front page of Del.icio.us. Here's graphical proof

Contact

Drop me a note at [email protected]. Cheers!

Donate

If you're feeling generous, buy me a cup of coffee.
A donut. Bagel, whatever, I'm starving.


Fork me on GitHub