<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<meta name="description" content="Export with customisable file name" />
<link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.1.3/b-3.1.1/b-colvis-3.1.1/b-html5-3.1.1/r-3.0.2/rg-1.5.0/sl-2.0.4/datatables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.1.3/b-3.1.1/b-colvis-3.1.1/b-html5-3.1.1/r-3.0.2/rg-1.5.0/sl-2.0.4/datatables.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pippo</td>
<td>pos1</td>
<td>NY</td>
<td>100</td>
</tr>
<tr>
<td>Pluto</td>
<td>pos1</td>
<td>NY</td>
<td>150</td>
</tr>
<tr>
<td>Paperino</td>
<td>pos2</td>
<td>CH</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
$(document).ready(function() {
function buildRow(data, rowNum, styleNum) {
// Builds row XML.
//Params:
// data: Row data.
// rowNum: Excel row number.
// styleNum: style number or empty string for no style.
//Returns:
// String of XML formatted row.
var style = styleNum ? ' s="' + styleNum + '"' : '';
var row = '<row r="' + rowNum + '">';
for (i=0; i<data.length; i++) {
colNum = (i + 10).toString(36).toUpperCase(); // Convert to alpha
var cr = colNum + rowNum;
row += '<c t="inlineStr" r="' + cr + '"' + style + '>' +
'<is>' +
'<t>' + $('<p>' + data[i] + '</p>').text() + '</t>' + //fix to remove eventualli bad closed tags (for example input type=checkbox added to Select plugin)
'</is>' +
'</c>';
}
row += '</row>';
return row;
}
function getTableData() {
var ws = '';
var rowNum = 1;
ws += '<sheetData>';
$("#example tbody tr").each(function(val, index){
var arrData = [];
if ( $(this).find("td").length ) {
arrData = $(this).find("td").map(function (){
return $(this).text().trim();
}).get();
}
if ( $(this).find("th").length ) {
arrData = $(this).find("th").map(function (){
return $(this).text().trim();
}).get();
}
ws += buildRow(arrData, rowNum, '');
rowNum++;
});
ws += '</sheetData>';
return ws;
}
function updateSheet1(xlsx) {
var newSheet = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'+
'<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" mc:Ignorable="x14ac">'+
getTableData() + '</worksheet>';
// Get sheet.
var sheet = xlsx.xl.worksheets['sheet1.xml'] = $.parseXML(newSheet);
}
function getDataSrc(dt) {
// Return the RowGroup dataSrc
var dataSrc = dt.rowGroup().dataSrc();
// If multi level use only the first level
if ( Array .isArray( dataSrc ) ) {
dataSrc = dataSrc[0];
}
return dataSrc;
}
var table = $('#example').DataTable({
rowGroup: {
startRender: null,
endRender: function (rows, group) {
var sum =
rows
.data()
.pluck(3)
.reduce((a, b) => {
var x = parseFloat(a) || 0;
var y = parseFloat(b.replace(/[^\d.-]/g, '')) || 0;
return x + y;
}, 0);
return $('<tr/>')
.append(
'<th>' + 'Totale di ' + group + '</th>' +
'<th>' + '' + '</th>' +
'<th>' + '' + '</th>' +
'<th class="text-right">' + sum + '</th>');
},
dataSrc: 2
},
order: [[2, 'asc']],
// dom: 'Bfrtip',
layout: {
top2Start: 'pageLength',
top2End: null,
topStart: 'buttons',
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
buttons: [
{
extend: 'excelHtml5',
text: 'RowGroup Excel',
// Options supported by RowGroup customize function
title: '',
header: true,
messageTop: 'This is the top',
messageBottom: 'This is the bottom',
sheetName: 'Single Sheet',
footer: true,
exportOptions: {
modifier: {
search: 'applied',
}
},
customize: function( xlsx, button, dt ) {
updateSheet1(xlsx);
},
}]
});
});
This bin was created anonymously and its free preview time has expired. Get a free unrestricted account
Dismiss xShortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + [ | Indents selected lines |
ctrl + ] | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Clone Bin |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |