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

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.

      ../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 and
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 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>

Done.

Demo: http://www.reconstrukt.com/ingrid/example1.html
Download: jquery.ingrid-0.9.2.js

• jquery-1.2.js
• ingrid.css
• Images (browse)

Source: http://www.reconstrukt.com/ingrid/

Related Listings:

1. KeyTable – jQuery Table Plugin KeyTable is a Javascript library which provides keyboard navigation and...
2. Scrollable Table – JQuery Plugin This JavaScript code can be used to convert tables in...
3. JustAjax Table Script JustAjaxTable 1.9new performs all operation with tables “on-fly” using Ajax...
4. jQuery Fixed Table Header Plugin Fixed Table Header is fixing header row of table without...
5. Table Gear – Moo Tools Plugin TableGear is a software package for working with data on...

Do you like this post?

Email: