Bootstrap 3 DataTable导出到Excel而不导出表数据
[英]Bootstrap 3 DataTable export to Excel not exporting table data
问题描述
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 
我正在尝试使用以下示例将表的内容导出到MS Excel： 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. 我正在用Java生成表内容。
Page image: 页面图片：
[![enter image description here][1]][1] [！[在此处输入图片描述] [1]] [1]
Output: 输出：
[![enter image description here][2]][2] [！[在此处输入图片描述] [2]] [2]
-------------------------------------------------------------------------- Second Attempt -------------------------------------------------- ------------------------ 第二次尝试
I have changed my approach and am now passing json. 我已经改变了方法，现在正在传递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. 好的，我已经弄清楚了如何传递JSON并使用AJAX填充表格。 However, the export to Excel still only exports the name and table headings. 但是，导出到Excel仍仅导出名称和表标题。
-------------------------------------------------------------------------- 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: 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. 该错误不是由于从JSON填充了HTML表。 The "$('#joinedTable').DataTable();" “ $（'＃joinedTable'）。DataTable（）;” being in the ".done(function(responseJson1a)" causes the error. The below works until the "$('#joinedTable').DataTable();" is un-commented. However, only the 在“ .done（function（responseJson1a）”中会导致错误。下面的工作直到“ $（'＃joinedTable'）。DataTable（）;”取消注释。但是，只有
<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: 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: 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 个解决方案
解决方案1
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 . 您要在填充表之前初始化dataTable ，这就是为什么它看不到通过ajax提取的任何动态数据的原因。 Put the initialization code after the data table has been rendered (see -- INIT -- below) 在呈现数据表之后放置初始化代码（请参阅下面的-- INIT -- ）
$(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. 另一种使您免于自己填充表的方法是将url传递给JSON feed，直接传递给dataTable插件，然后让表处理ajax和数据填充。 The Controller has to return the data in the format specified here 控制器必须以here指定的格式返回数据
$('#example').DataTable( {
"ajax": 'pathToYourController',
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
解决方案2
1 2018-06-18 22:45:31
The resolution main points are: 分辨率要点是：
var table = $('#joinedTable').DataTable( {
table.clear();
table.rows.add(responseJson1a).draw();
HTML: 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: 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);
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将SWT表数据导出到Excel电子表格 - Exporting SWT Table data to a Excel spreadsheet
使用POI将HTML数据表导出到Excel - Export HTML data table to Excel using POI
如何将rich：dataTable导出为excel - How to export rich:dataTable to excel
Seam以Excel格式导出数据表 - Seam Export Datatable in Excel format
将JTable数据导出到Excel - Exporting jtable data into Excel
将 JTable 数据（包括表头）导出到 Excel 文件 - Exporting JTable Data including Table Headers to Excel File
将动态生成的表导出为excel - Exporting a dynamically generated table to excel
从java导出数据到excel - Exporting data to excel from java
导出到Excel之前对数据进行排序 - Sort data before exporting to excel
导出到Excel（Java列表，HtmlDataTable，rich：dataTable） - Export to Excel (Java List, HtmlDataTable, rich:dataTable)
相关标签