Databases
StackOverflow2013
Postsdbo
POData Tables and Nested tables
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POData Tables and Nested tables
    text
    copied!<p>I am having real trouble understanding what is happening with Data Tables. I create a DataTable as follows </p> <pre><code>var dTable = $('#sessionReport').dataTable({ "bInfo" : false, "bFilter" : false, "aaData" : data, "bDestroy" : true, "fnFooterCallback" : function(nRow, aaData, iStart, iEnd, aiDisplay){ var totalAttendees = 0; var totalTime = 0; var avgSatisfaction = 0; for(var i=0; i&lt;aaData.length; i++){ avgSatisfaction = avgSatisfaction + ((aaData[i][7]*1)+3*1)/aaData.length; // range is from -2 to + 2; have added 3 to each result to make range of positive numbers only totalAttendees = totalAttendees + aaData[i][5]*1; startTime = new Date(aaData[i][0]); endTime = new Date(aaData[i][1]); totalTime = totalTime + (endTime - startTime)/10000; } //alert(secondsToString(totalTime)); //$('#tfAttendees').innerHTML = parseInt(totalAttendees); var nCells = nRow.getElementsByTagName('th'); nCells[5].innerHTML = parseInt(totalAttendees); nCells[7].innerHTML = parseFloat(avgSatisfaction.toFixed(2)); } }); return dTable; </code></pre> <p>My data is formatted like this: </p> <pre><code>[ 0: "2012-10-24 09:43:03" 1: "2012-10-24 09:49:47" 2: "5002028" 3: "Eamonn" 4: "Dannys Memories" 5: "7" 6: "" 7: "0" ], [O:....], </code></pre> <p>But I run into problems when I want to add a column with an icon to each row like in this solution <a href="http://datatables.net/blog/Drill-down_rows" rel="nofollow">http://datatables.net/blog/Drill-down_rows</a></p> <p>I have tried using aoColumns and aoColumnsdef. But not really sure how. My problem is that table html is being built by the data. So if there are only 7 items in the data array there will only be 7 columns in my Html Table. How can I add an eighth column. I want the beginning on each row to have a clickable icon.</p> <p>And my html looks like this...</p> <pre><code>&lt;table id="sessionReport" class="table table-striped fTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt;Start Session&lt;/td&gt; &lt;td&gt;End Session&lt;/td&gt; &lt;td&gt;Session Id&lt;/td&gt; &lt;td&gt;Facilitator&lt;/td&gt; &lt;td&gt;Group Name&lt;/td&gt; &lt;td&gt;No. Attendees&lt;/td&gt; &lt;td&gt;Assistant&lt;/td&gt; &lt;td&gt;Satisfaction&lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th id="tfStartSession"&gt; Total Hours &lt;/th&gt; &lt;th id="tfEndSession"&gt; &lt;/th&gt; &lt;th id="tfSessionId"&gt; &lt;/th&gt; &lt;th id="tfFacilitator"&gt; &lt;/th&gt; &lt;th id="tfGroupName"&gt; TOTAL ATTENDEES : &lt;/th&gt; &lt;th id="tfAttendees"&gt; &lt;/th&gt; &lt;th id="tfAssistant"&gt; AVG SATISFACTION : &lt;/th&gt; &lt;th id="tfSatisfaction"&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; </code></pre> <p>Any ideas. I'm a bit stumped by DataTables documentation and they don't seem to provide any usage examples of either aoColumns or aoColumnsDef.</p> <p>Many thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload