CouchView

h1. Couch-View

h2. Overview

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.

h2. A Quick Guide with HTML Tables

h4. Before I Embark...

Before I embark in trying to explain how to use this plug-in, I'm going to explain the JSON datastructure 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:

       <pre>
       {
        _id: "4da96f65dfecf6edd329269c3799de60",
        _rev: "1-3a49c260576c26c758742c8842d5b9ca",
        loadAvgHourlyNI: 8404.7,
        hourEnd: 1,
        loadAvgHourlyDUQ: 1263.2,
        loadAvgHourlyDAY: 1392.2, 
        loadAvgHourlyMIDATL: 22126.6, 
        loadAvgHourlyDOM: 7162.4, 
        loadAvgHourlyAEP: 10855.8, 
        loadAvgHourlyAP: 3834.5, 
        date: "2010-04-05", 
            id: "pjm-20100405-01"}
       </pre>
       
       I'll start with using this view:
       
       <pre>
        {
            "_id": "_design/tests",
            "_rev": "2-9712dcb1e76a5cc7ab0e0e0b5bf7a70a",
            "language": "javascript",
            "views": {
                "id": {
                    "map": "function(doc) {\n  emit(doc.id, null);\n}"
                }
            }
        }
       </pre>
       
       So <a href="http://69.164.211.38:8080/mydb/_design/tests/_view/id?limit=2">http://69.164.211.38:8080/mydb/_design/tests/_view/id?limit=2&include_docs=true</a>
       will give you:
       <pre>
       {
        "total_rows":24,
        "offset":0,
        "rows":[
                    {
                        "id":"4da96f65dfecf6edd329269c3799de60",
                        "key":"pjm-20100405-01",
                        "value":{"_id":"4da96f65dfecf6edd329269c3799de60","_rev":"1-3a49c260576c26c758742c8842d5b9ca","loadAvgHourlyNI":8404.7,"hourEnd":1,"loadAvgHourlyDUQ":1263.2,"loadAvgHourlyDAY":1392.2,"loadAvgHourlyMIDATL":22126.6,"loadAvgHourlyDOM":7162.4,"loadAvgHourlyAEP":10855.8,"loadAvgHourlyAP":3834.5,"date":"2010-04-05","id":"pjm-20100405-01"}
                    },
                    {"id":"6339d2c104c222a31872ac400f2a5bb9","key":"pjm-20100405-02","value":{"_id":"6339d2c104c222a31872ac400f2a5bb9","_rev":"1-0e0e84e6485fd61bf830cd01df406393","loadAvgHourlyNI":8011.1,"hourEnd":2,"loadAvgHourlyDUQ":1242.6,"loadAvgHourlyDAY":1347.6,"loadAvgHourlyMIDATL":21215.9,"loadAvgHourlyDOM":6819,"loadAvgHourlyAEP":10485.4,"loadAvgHourlyAP":3808,"date":"2010-04-05","id":"pjm-20100405-02"}}
                ]
            }
       </pre>
       </li>
       <li>
       <H4>What to Include</h4>
         Include jquery in your HTML header. You can use googleapis for this. Then add jquery.couchview.js. 
                <pre>
                    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
                    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.couchview.js&quot;&gt;&lt;/script&gt;
                </pre>
        </li>
        
        
        
        <li>
            <h4>Creating your Template</h4>
            
            Code an example table with one row of dummy data:
                <table><tr><td>
                <pre>
                 &lt;table id=&quot;table-1&quot; bgcolor=&quot;gray&quot;&gt;
             &lt;tbody&gt;
              &lt;tr  bgcolor=&quot;lightgray&quot;&gt;
                    &lt;th&gt;Id&lt;/th&gt;
                    &lt;th&gt;Date&lt;/th&gt;
                    &lt;th&gt;Hour&lt;/th&gt;
                    &lt;th&gt;Load&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr  bgcolor=&quot;white&quot; class=&quot;data-row&quot;&gt;
                  &lt;td&gt;pjm-20100405-24&lt;/td&gt;
                  &lt;td&gt;05/04/2010&lt;/td&gt;
                  &lt;td&gt;24&lt;/td&gt;
                  &lt;td&gt;1686.4&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
                </pre>
                </td></tr><tr>
                <td>
            <table bgcolor="gray">
             <tbody>
              <tr  bgcolor="lightgray">
                   <th>Id</th><th>Date</th><th>Hour</th><th>Load</th>
              </tr>
              <tr  bgcolor="white" class="data-row">
                  <td>test_id</td><td>05/04/2010</td><td>24</td><td>1686.4</td>
              </tr>
              </tbody>
            </table>
            </td></tr></table>
                </li>
        
        
       
         <li>  
         <h4>Apply the plugin</H4>
         Apply the plugin 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.             
        <pre>
        &lt;html lang=&quot;en&quot;&gt;
            &lt;head&gt;
                &lt;title&gt;Couch View&lt;/title&gt;
                &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;
                &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
                &lt;script type=&quot;text/javascript&quot;  src=&quot;jquery.couchview.js&quot;&gt;&lt;/script&gt;
                &lt;script&gt;
                    $(document).ready(function() {
                        $(&quot;.grid-test&quot;).couchview({
                        url: &quot;http://69.164.211.38:8080/mydb/_design/tests/_view/&quot;,
                        limit: 4,
                        view:'id'
                        });
                    });
                &lt;/script&gt;
            &lt;/head&gt;
        </pre>
    </li>
       
    <li> <h4>Enliven your Table</h4>
        <ol>
           <li> Add to the parent container, in this case table, the class 'grid-test', give it also an id.
                <pre>
                &lt;table id=&quot;table-1&quot; bgcolor=&quot;gray&quot;   class=&quot;grid-test&quot; &gt;
                </pre>
           </li>
           <li>
                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.
                <pre>

<table id="example-1" bgcolor="gray" class="grid-test"> <tbody class="data-body"> <tr bgcolor="lightgray" class="header-row"> <th>Id</th> <th>Date</th> <th>Hour</th> <th>Load</th> </tr> <tr bgcolor="white" class="data-row"> <td class="field" id="id">pjm-20100405-24</td> <td class="field" id="date">05/04/2010</td> <td class="field" id="hourEnd" >24</td> <td class="field" id="loadAvgHourlyDAY">1686.4</td> </tr> </tbody> </table> </pre> <table id="example-1" bgcolor="gray" class="grid-test"> <tbody class="data-body"> <tr bgcolor="lightgray" class="header-row"> <th id="id" class="column" >Id</th> <th id="date" class="column" >Date</th> <th id="hourEnd" class="column" >Hour</th> <th id="loadAvgHourlyDAY" class="column" >Load</th> </tr> <tr bgcolor="white" class="data-row"> <td class="field" id="id">pjm-20100405-24</td> <td class="field edit" id="date">05/04/2010</td> <td class="field edit" id="hourEnd" >24</td> <td class="field edit" id="loadAvgHourlyDAY">1686.4</td> </tr> </tbody> </table> </li> </ol> <li> <h4>Add a Pager</h4> Now we will add the pager. Here are the relevant classes: <table bgcolor="lightgray" > <tr bgcolor="white" ><th>class</th><th>Use</th></tr> <tr bgcolor="white" ><td>pager-first</td><td>Creates a clickable element that requests the first page data</td></tr> <tr bgcolor="white" ><td>pager-prev-page</td><td>Creates a clickable element that requests the previous page data</td><