thanos edited this page Sep 14, 2010 · 5 revisions
Clone this wiki locally



This JQuery plugin lets you map a CouchDb view to a html grid. That’s it. I looked at the other JQuery grid plug-ins – many of which a really great – But I couldn’t get them working and since I’m lazy I wrote this specialized plug-in.

So here are its features:

  • It’s HTML agnostic. Y ou can use tables or divs or any HTML to layout your data.
  • You can view JSON data from any source – such as CouchDB.
  • You get column sorting.
  • You get paging paging
  • It’s compatible with JEditable. So you can edit your data.
  • Really small – Currently under 3K.
  • Coded in a clean fashion so you can subclass header/body or footer generation and the loading and saving of data.

Before I Embark…

Before I embark in trying to explain how to use this plug-in, I’m going to explain the JSON data structure that it expects by default. As an example I will use a real database of more than 40K electric power usages records. Here is one of its documents:

We will start by using this simple couchdb view

So if you use the above view by requesting this url [] you will get

What to Include

Include jquery in your HTML header. You can use googleapis for this or the one that comes with couchdb. Then add jquery.couch-view.js.

Creating a Grid using <TABLE>

1.Create Your Template

Code an example HTML table with one row of dummy data
Id Date Hour Load
pjm-20100405-24 05/04/2010 24 1686.4

2. Apply the plug-in

Apply the plug-in to a class that you will use for your test grid. In these examples I will use grid-test. For options I’ve set the URL to our database’s view design document, the view and a page size of 4 lines.

Enliven your Table

  1. Add to the parent container, in this case table, the class grid-test, give it also an id.
    <table id="table-1" bgcolor="gray" class="grid-test" >
  2. Now add to each data cell, in this case the table’s TD element the class ‘field’ and a id attribute set to teh name of a field form the document: In this example we will want to show only id, date, hour, and loadAvgHourlyDAY.
Id Date Hour Load
pjm-20100405-24 05/04/2010 24 1686.4
pjm-20100405-01 2010-04-05 1 1392.2
pjm-20100405-02 2010-04-05 2 1347.6
pjm-20100405-03 2010-04-05 3 1327
pjm-20100405-04 2010-04-05 4 1330.9