-
Notifications
You must be signed in to change notification settings - Fork 2
Home
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 dataId | 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
- Add to the parent container, in this case table, the class
grid-test
, give it also anid
.
<table id="table-1" bgcolor="gray" class="grid-test" >
- 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