Bootstrap 3 DataTable export to Excel not exporting table data
Question
I am trying to export the contents of a table to MS Excel using this example: https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
I have everything displaying correctly on the page; however, when I export I only get the title and column headings. I am generating the table contents in java.
Page image:
[![enter image description here][1]][1]
Output:
[![enter image description here][2]][2]
-------------------------------------------------------------------------- Second Attempt
I have changed my approach and am now passing json. However, now the buttons are not displaying and the table is not formatted. No errors in the console log.
-------------------------------------------------------------------------- Third Attempt
OK I have worked out how to pass the JSON and use AJAX to populate the table. However, the export to Excel still only exports the name and table headings.
-------------------------------------------------------------------------- Fourth Attempt
I am trying:
$('#joinedTable').DataTable( {
"ajax": responseJson1a,
} );
I also tried:
$('#joinedTable').DataTable( {
"ajax": JSON.stringify(responseJson1a),
} );
And I have cleaned up the libraries.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Group Summary</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Le styles -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
</head>
<body>
<div id="groupSummary" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showGroupSummaryForm">
<div class="row">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="jumbotron">
<h3>Group Summary</h3>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class="input-group date" id="datepicker1">
<input type="text" id="startDate" class="form-control" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class='input-group date' id='datepicker2'>
<input type='text' id="endDate" class="form-control" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<button id='submit' class='btn btn-primary btn-lg'>Display Details</button>
</div>
<div class="container" id=joined>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<table id="joinedTable" class="display" style="width:100%">
<thead>
<tr>
<th>section</th>
<th>subSection</th>
<th>metric</th>
<th>metricTotal</th>
</tr>
</thead>
</table>
<div style="text-align: center;">
<span id="ajaxGetUserServletResponse1" style="color: red;"></span>
</div>
</div>
</div><!-- /container -->
</div>
</div>
</div>
</div><!-- /row -->
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
</html>
Ajax:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
// $('#joinedTable').DataTable( {
// "paging": false,
// "ordering": false,
// "info": false,
// "searching": false,
// dom: 'Bfrtip',
// buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
// } );
$("#showGroupSummaryForm").validate({
//debug: true,
rules: {
startDate: {
required: true
},
endDate: {
required: true
}
},
messages: {
startDate: {
required: "Please select a start date."
},
endDate: {
required: "Please select an end date."
}
},
submitHandler : function(showGroupSummaryForm) {
$('#joinedTable tbody > tr').remove();
$('#ajaxGetUserServletResponse1').text('');
var dataToBeSent = {
ssAccountID : sessionStorage.getItem('ssAccountID'),
startDate : $("#startDate").val(),
endDate: $("#endDate").val()
};
//Joined
$.ajax({
url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
})
.fail (function(jqXHR, textStatus, errorThrown) {
//alert(jqXHR.responseText);
if(jqXHR.responseText.includes('No members joined in this date range')){
$('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
}else{
$('#ajaxGetUserServletResponse1').text('Error getting joined data.');
}
$("#datepicker1").focus();
})
.done(function(responseJson1a){
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// Result of alert is:
// [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
$('#joinedTable').DataTable( {
"ajax": responseJson1a,
} );
})
}
})
}); // end document.ready
$(function(){
$("#includedContent").load("Menu.html");
$('#datepicker1').datepicker({
format: 'dd/mm/yyyy',
});
$('#datepicker2').datepicker({
useCurrent: false, //Important! See issue #1075
format: 'dd/mm/yyyy',
});
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DatePicker").minDate(e.date);
});
$("#datepicker2").on("dp.change", function (e) {
$('#datepicker1').data("DatePicker").maxDate(e.date);
});
});
This gives me an error in the console:
Uncaught TypeError: $(...).DataTable is not a function
at Object.<anonymous> (groupSummary-ajax.js:70)
at i (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:2:27449)
at Object.fireWith [as resolveWith] (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:2:28213)
at y (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:4:22721)
at XMLHttpRequest.c (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:4:26925)
-------------------------------------------------------------------------- Narrow down the error
The error is not due to the HTML table being populated from JSON. The "$('#joinedTable').DataTable();" being in the ".done(function(responseJson1a)" causes the error. The below works until the "$('#joinedTable').DataTable();" is un-commented. However, only the
<tr>
<td>Cubs</td>
<td>3</td>
</tr>
<tr>
<td>Scouts</td>
<td>5</td>
</tr>
is exported. Not
<tr>
<td>Cubs</td>
<td>9</td>
</tr>
<tr>
<td>Scouts</td>
<td>10</td>
</tr>
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Group Summary</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Le styles -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
</head>
<body>
<div id="groupSummary" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showGroupSummaryForm">
<div class="row">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="jumbotron">
<h3>Group Summary</h3>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class="input-group date" id="datepicker1">
<input type="text" id="startDate" class="form-control" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class='input-group date' id='datepicker2'>
<input type='text' id="endDate" class="form-control" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<button id='submit' class='btn btn-primary btn-lg'>Display Details</button>
</div>
<div class="container" id=joined>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<table class="table table-hover table-bordered" id="joinedTable">
<thead>
<tr>
<th>Section</th>
<th>Joined</th>
</tr>
</thead>
<tbody id="mytablebody">
<tr>
<td>Cubs</td>
<td>3</td>
</tr>
<tr>
<td>Scouts</td>
<td>5</td>
</tr>
</tbody>
<!--<tbody id="mytablebody"></tbody> -->
</table>
<div style="text-align: center;">
<span id="ajaxGetUserServletResponse1" style="color: red;"></span>
</div>
</div>
</div><!-- /container -->
</div>
</div>
</div>
</div><!-- /row -->
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="js/DataTable.js"></script>
</body>
</html>
AJAX:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#joinedTable').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
} );
$("#showGroupSummaryForm").validate({
//debug: true,
rules: {
startDate: {
required: true
},
endDate: {
required: true
}
},
messages: {
startDate: {
required: "Please select a start date."
},
endDate: {
required: "Please select an end date."
}
},
submitHandler : function(showGroupSummaryForm) {
$('#joinedTable tbody > tr').remove();
$('#ajaxGetUserServletResponse1').text('');
var dataToBeSent = {
ssAccountID : sessionStorage.getItem('ssAccountID'),
startDate : $("#startDate").val(),
endDate: $("#endDate").val()
};
//Joined
$.ajax({
url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
})
.fail (function(jqXHR, textStatus, errorThrown) {
//alert(jqXHR.responseText);
if(jqXHR.responseText.includes('No members joined in this date range')){
$('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
}else{
$('#ajaxGetUserServletResponse1').text('Error getting joined data.');
}
$("#datepicker1").focus();
})
.done(function(responseJson1a){
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// Result of alert is:
// [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
var tablebody2 = ' <tr>' +
'<td>Cubs</td>' +
'<td>9</td>' +
'</tr>' +
'<tr>' +
'<td>Scouts</td>' +
'<td>10</td>' +
'</tr>';
$("#mytablebody").empty();
$("#mytablebody").append(tablebody2);
// $('#joinedTable').DataTable(); // Uncomment this and the error happens
})
}
})
}); // end document.ready
$(function(){
$("#includedContent").load("Menu.html");
$('#datepicker1').datepicker({
format: 'dd/mm/yyyy',
});
$('#datepicker2').datepicker({
useCurrent: false, //Important! See issue #1075
format: 'dd/mm/yyyy',
});
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DatePicker").minDate(e.date);
});
$("#datepicker2").on("dp.change", function (e) {
$('#datepicker1').data("DatePicker").maxDate(e.date);
});
});
2 answers
solution1
1 2018-06-10 05:02:16
You are initializing the dataTable before the table gets populated, that's why it can't see any of the dynamic data you are fetching via ajax . Put the initialization code after the data table has been rendered (see -- INIT -- below)
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
// push the init code
$("#showGroupSummaryForm").validate({
//debug: true,
rules: {
startDate: {
required: true
},
endDate: {
required: true
}
},
messages: {
startDate: {
required: "Please select a start date."
},
endDate: {
required: "Please select an end date."
}
},
submitHandler : function(showGroupSummaryForm) {
$('#joinedTable tbody > tr').remove();
$('#ajaxGetUserServletResponse1').text('');
var dataToBeSent = {
ssAccountID : sessionStorage.getItem('ssAccountID'),
startDate : $("#startDate").val(),
endDate: $("#endDate").val()
};
//Joined
$.ajax({
url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
dataType: 'JSON',
})
.fail (function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText.includes('No members joined in this date range')){
$('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
}else{
$('#ajaxGetUserServletResponse1').text('Error getting joined data.');
}
$("#datepicker1").focus();
})
.done(function(responseJson1a){
// JSON response to populate the joined table
populateTable(responseJson1a)
// -- INIT --
// initialize the table
// after the data has loaded
$('#joinedTable').DataTable( {
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
serverSide: true,
initComplete : function () {
table.buttons().container()
.appendTo( $('#joinedSpace .col-sm-6:eq(0)'));
},
});
})
}
});
}); // end document.ready
function populateTable(object) {
var obj = object;
var table = $("<table id='joinedTable'/>");
table[0].border = "1";
var columns = Object.keys(obj[0]);
var columnCount = columns.length;
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html([columns[i]]);
row.append(headerCell);
}
for (var i = 0; i < obj.length; i++) {
row = $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(obj[i][columns[j]]);
row.append(cell);
}
}
var dvTable = $("#joinedSpace");
// dvTable.html("");
dvTable.append(table);
}
$(function(){
$("#includedContent").load("MenuGL.html");
$('#datepicker1').datepicker({
format: 'dd/mm/yyyy',
});
$('#datepicker2').datepicker({
useCurrent: false, //Important! See issue #1075
format: 'dd/mm/yyyy',
});
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DatePicker").minDate(e.date);
});
$("#datepicker2").on("dp.change", function (e) {
$('#datepicker1').data("DatePicker").maxDate(e.date);
});
});
Another alternative that saves you from populating the table yourself, is to pass the url to the JSON feed directly to the dataTable plugin and let the table handle the ajax and the data population. The Controller has to return the data in the format specified here
$('#example').DataTable( {
"ajax": 'pathToYourController',
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
solution2
1 2018-06-18 22:45:31
The resolution main points are:
var table = $('#joinedTable').DataTable( {
table.clear();
table.rows.add(responseJson1a).draw();
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Group Summary</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Le styles -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
</head>
<body>
<div id="groupSummary" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showGroupSummaryForm">
<div class="row">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="jumbotron">
<h3>Group Summary</h3>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class="input-group date" id="datepicker1">
<input type="text" id="startDate" class="form-control" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class='input-group date' id='datepicker2'>
<input type='text' id="endDate" class="form-control" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<button id='submit' class='btn btn-primary btn-lg'>Display Details</button>
</div>
<div class="container" id=joined>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<table class="table table-hover table-bordered" id="joinedTable">
<thead>
<tr>
<th>Section</th>
<th>Joined</th>
</tr>
</thead>
<tbody id="mytablebody">
</tbody>
</table>
<div style="text-align: center;">
<span id="ajaxGetUserServletResponse1" style="color: red;"></span>
</div>
</div>
</div><!-- /container -->
</div>
</div>
</div>
</div><!-- /row -->
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="js/DataTable.js"></script>
</body>
</html>
AJAX:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var table = $('#joinedTable').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
columns: [
{data: 'section'},
{data: 'metricTotal'}
]
} );
$("#showGroupSummaryForm").validate({
//debug: true,
rules: {
startDate: {
required: true
},
endDate: {
required: true
}
},
messages: {
startDate: {
required: "Please select a start date."
},
endDate: {
required: "Please select an end date."
}
},
submitHandler : function(showGroupSummaryForm) {
$('#ajaxGetUserServletResponse1').text('');
var dataToBeSent = {
ssAccountID : sessionStorage.getItem('ssAccountID'),
startDate : $("#startDate").val(),
endDate: $("#endDate").val()
};
//Joined
$.ajax({
url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
})
.fail (function(jqXHR, textStatus, errorThrown) {
//alert(jqXHR.responseText);
if(jqXHR.responseText.includes('No members joined in this date range')){
$('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
}else{
$('#ajaxGetUserServletResponse1').text('Error getting joined data.');
}
$("#startDate").focus();
})
.done(function(responseJson1a){
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// Result of alert is:
// [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
table.clear();
table.rows.add(responseJson1a).draw();
})
}
})
}); // end document.ready
$(function(){
$("#includedContent").load("Menu.html");
$('#datepicker1').datepicker({
format: 'dd/mm/yyyy',
});
$('#datepicker2').datepicker({
useCurrent: false, //Important! See issue #1075
format: 'dd/mm/yyyy',
});
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DatePicker").minDate(e.date);
});
$("#datepicker2").on("dp.change", function (e) {
$('#datepicker1').data("DatePicker").maxDate(e.date);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Exporting SWT Table data to a Excel spreadsheet
Export HTML data table to Excel using POI
How to export rich:dataTable to excel
Seam Export Datatable in Excel format
Exporting jtable data into Excel
Exporting JTable Data including Table Headers to Excel File
Exporting a dynamically generated table to excel
Exporting data to excel from java
Sort data before exporting to excel
Export to Excel (Java List, HtmlDataTable, rich:dataTable)
Related Tags