Enhance a html table (with export features) SF 6.0+

html:
<TABLE id='myTable'>
 <THEAD>
  <TR><TH>ENERGY STAR Partner</TH><TH>Brand Name</TH><TH>Model Name</TH><TH>Model Number</TH><TH>Additional Model Information</TH><TH>Energy Factor (L/kWh)</TH><TH>Product Capacity (pints/day)</TH><TH>Fan Continuously Operates?</TH><TH>Date Available on Market</TH><TH>Date Qualified</TH>  </TR>
 </THEAD>
 <TBODY>
  <TR><TD>Danby Products Inc.</TD><TD>CLASSIC</TD><TD>Dehumidifier</TD><TD>3824-515</TD><TD>(Empty)</TD><TD>1.85</TD><TD>25.0</TD><TD>Yes</TD><TD>12/15/2012</TD><TD>12/7/2012</TD>  </TR>
  <TR><TD>Danby Products Inc.</TD><TD>CLASSIC</TD><TD>Dehumidifier</TD><TD>3824-516</TD><TD>(Empty)</TD><TD>1.85</TD><TD>50.0</TD><TD>Yes</TD><TD>12/15/2012</TD><TD>12/7/2012</TD>  </TR>
  <TR><TD>Danby Products Inc.</TD><TD>CLASSIC</TD><TD>Dehumidifier</TD><TD>3824-517</TD><TD>(Empty)</TD><TD>1.85</TD><TD>70.0</TD><TD>Yes</TD><TD>12/15/2012</TD><TD>12/7/2012</TD>  </TR>
 </TBODY>
</TABLE>


script:
//enhances the html table with export features
//add css to head
$("<link/>", { "rel": "stylesheet", "type": "text/css", "href": "http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/css/jquery.dataTables.css" }).appendTo("head");
$("<link/>", { "rel": "stylesheet", "type": "text/css", "href": "http://cdn.datatables.net/tabletools/2.2.0/css/dataTables.tableTools.css" }).appendTo("head");

//add scripts to head
$.getScript("http://cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js",function(){
$.getScript("http://cdn.datatables.net/tabletools/2.2.0/js/dataTables.tableTools.min.js",initMyTable)
})

//render the table
initMyTable = function(){
    $('#myTable').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
        }
    } );
}


Note: if you have your html table in a document property, you can parse the document property by adding this other script:

html:
<SpotfireControl id="87a95f42654b41b88be708552e5942bb" />

script:
$("#87a95f42654b41b88be708552e5942bb").html($("#87a95f42654b41b88be708552e5942bb").text())


Look at my previous posts to see how to generate the html from filtered rows and put the html into a document property.



No comments: