Databases
StackOverflow2013
Postsdbo
POExport table data to excel using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExport table data to excel using jQuery
    primarykey
    data
    text
    <p>I'm using this code:</p> <pre><code>var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '&lt;html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"&gt;&lt;head&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;&lt;x:Name&gt;{worksheet}&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;&lt;x:DisplayGridlines/&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;{table}&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })() </code></pre> <p>Here is my submit button:</p> <pre><code>&lt;td&gt;&lt;input type="button" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"&gt;&lt;/td&gt; </code></pre> <p>The problem I'm having is some of my inputs are dropdowns and inputs but they are hidden on the time of building the excel file. So when the excel files first builds you'll see all the data and within 2 seconds all the data that has the hidden drop downs and inputs behind them go blank and render the html.</p> <p>Pic1:</p> <p><img src="https://i.stack.imgur.com/73SZG.png" alt="Fields with inputs dissapear"></p> <p>Pic2:</p> <p><img src="https://i.stack.imgur.com/MnNHp.png" alt="hidden elements"></p> <p>I'm trying to use textExtraction but it's not working for me.</p> <pre><code>$('#project_table').tablesorter({ textExtraction: myTextExtraction }); //todo: try getting the dataTable to work... // it might be way better, just not sure how it would handle // adding unrelated rows on the fly (comments) //$('#project_table').dataTable(); </code></pre> <hr> <pre><code>var myTextExtraction = function(node) { var elem = $(node); var theVal = null; if (elem.hasClass('edit')) { elem.children().each(function() { if ($(this).css('display') != 'none') { if ($(this).is('span')) { theVal = $(this).text(); } else { //all other element types (input, select, etc) theVal = $(this).val(); } } }); } else { theVal = elem.text(); } //console.log(theVal); var c = node.childNodes.length; if (c == 1) { theVal = node.innerHTML.trim(); } else if (c == 5) { theVal = node.childNodes[3].innerHTML.trim(); } //console.log(theVal); return theVal; } </code></pre> <p>Can anyone lend a hand, thank you.</p> <p>Also if anyone knows an IE8 fix, it seems to only work in chrome and FF.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTaryn
    1. USHead Way
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POExport table data to excel using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POExport table data to excel using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POExport table data to excel using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. CORestrictions on `data:` uri use in IE are covered here: basically your current approach will not work on IE8/9 (or 10?). An alternative would be to POST the content to a server and have it return the content with the relevant headers.
      singulars
      1. POExport table data to excel using jQuery
      1. USTim Williams
    2. COAny idea why it's turning the drop down fields to blank when it's merged into excel? I posted a picture above top left part of image one.
      singulars
      1. POExport table data to excel using jQuery
      1. USHead Way
    3. COAs @TimWilliams pointed out - you could save yourself a ton of headaches by simply hitting the server and serving back the headers needed to serve up a file that Excel can open.
      singulars
      1. POExport table data to excel using jQuery
      1. USscunliffe
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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