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 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 [http:https://69.164.211.38:8080/mydb/design/tests/view/id?limit=2] you will get

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.

Code an example HTML table with one row of dummy data

Id	Date	Hour	Load
pjm-20100405-24	05/04/2010	24	1686.4

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