renderTableFromArray

by spacexplorer

HTML

<script src="http://www.flexigrid.info/js/flexigrid.pack.js"></script>
<link rel="stylesheet" href="http://www.flexigrid.info/css/flexigrid.pack.css">
<TABLE border="1" id="grid1"
          summary="This table gives some statistics about fruit
                   flies: average height and weight, and percentage
                   with red eyes (for both males and females).">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
    <TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>
    <br />
    
<table class='DG' border='1'>
        
<tr><th colspan="2" class="empty"></th><th colspan="2" class="tasks">tasks</th> <th colspan="3" class="calls">calls</th> <th class="credit">credit</th> <th class="empty"></th></tr>

<tr><th></th><th>date</th> <th class="tasks">task name</th> <th class="tasks">task status</th> <th class="calls">call name</th> <th class="calls">call Type</th> <th class="calls">duration</th> <th class="credit">amount</th> <th>description</th></tr>

<tr><td>1</td> <td>2</td> <td class="tasks">3</td> <td class="tasks">4</td> <td class="calls">5</td> <td class="calls">6</td> <td class="calls">7</td> <td class="credit">8</td><td>9</td></tr>
        
<tr class="alt"><td>2</td> <td>2</td> <td class="tasks">3</td> <td class="tasks">4</td> <td class="calls">5</td> <td class="calls">6</td> <td class="calls">7</td> <td class="credit">8</td><td>9</td></tr> 
    
    <tr><td>3</td> <td>2</td> <td class="tasks">3</td> <td class="tasks">4</td> <td class="calls">5</td> <td class="calls">6</td> <td class="calls">7</td> <td class="credit">8</td><td>9</td></tr>
        
</table> 

    
    
    <div id="myDG">xxxxx</div>

CSS

.DG,
.DG td,
.DG tr,
.DG th{
    border: 1px solid #C2C2C2;
    padding: 1px 4px;
    font-size: 13px;
}

.DG td {
      font-size: 11px;
}
.empty{
    background: #C2C2C2;
    
}

th.tasks{
background: rgba(0, 178, 242,.4); 
}

th.credit{
background: rgba(255, 206, 0, .4);
}
th.calls{
background: rgba(0, 204, 9, .4);
}

tr.odd{
    background: #D9D9D9;
}

td.tasks{
/*background: #DFEFF7;*/
background: rgba(0, 178, 242,.2);    
    
}
td.credit{
background: rgba(255, 206, 0, .2);
}
td.calls{
background: rgba(0, 204, 9, .2);
}
td.totals {
 text-align: right;   
}

JavaScript

//var $data = {"action":"viewAccountHistory","ajax":"true"};
//alert($data.action);

var $data = {"action":"viewAccountHistory","ajax":"true","debugActive":"true","debug":"viewAccountHistory called<br \/>0> debug is active<br \/>1> requested viewAccountHistory","historyResult":[{"caseName":null,"type":"credit","callName":null,"duration":null,"callType":null,"taskName":null,"taskStatus":null,"amount":"15","description":"a gift from buildinghelp..","date":"2012-02-21 02:20:48"},{"caseName":null,"type":"credit","callName":null,"duration":null,"callType":null,"taskName":null,"taskStatus":null,"amount":"21","description":"purchased online..","date":"2012-02-21 03:18:37"},{"caseName":null,"type":"credit","callName":null,"duration":null,"callType":null,"taskName":null,"taskStatus":null,"amount":"25","description":"updated credit","date":"2012-02-21 03:30:53"},{"caseName":"Bathroom Extension","type":"task","callName":null,"duration":null,"callType":null,"taskName":"review uploaded plan","taskStatus":"In Progress","amount":null,"description":"Jaco uploaded a new draft og the proposed ammendmends to his bathroom - review","date":null},{"caseName":"Bathroom Extension","type":"calls","callName":"Tile Types","duration":"15","callType":"phone_call","taskName":null,"taskStatus":null,"amount":null,"description":"Jaco Called and asked about the type of tiles","date":"2011-12-10 22:30:00"},{"caseName":"Bathroom Extension","type":"calls","callName":"Jaco Graaff asked about Tiles","duration":"15","callType":"phone_call","taskName":null,"taskStatus":null,"amount":null,"description":"John was not available - Mary answered a question","date":"2012-01-24 23:45:00"},{"caseName":"Bathroom Extension","type":"task","callName":null,"duration":null,"callType":null,"taskName":"Jaco Samples Check","taskStatus":"In Progress","amount":null,"description":"John - I talked to Jaco while you were away and checked his samples - will you just double check and get back to him","date":"2012-02-09...