Java Bootstrap 3数据表导出到Excel不导出表数据
我正在尝试使用以下示例将表的内容导出到MS Excel: 我已经在页面上正确显示了所有内容;然而,当我导出时,我只得到标题和列标题。我正在用java生成表内容 页面图像: [![在此处输入图像描述][1][1] 输出: [![在此处输入图像描述][2][2] -------------------------------------------------------------------------------------- 第二次尝试 我已经改变了我的方法,现在正在传递json。但是,现在按钮不显示,表格也没有格式化。控制台日志中没有错误 -------------------------------------------------------------------------------------- 第三次尝试 好的,我已经解决了如何传递JSON并使用AJAX填充表。但是,导出到Excel仍然只导出名称和表标题 -------------------------------------------------------------------------------------- 第四次尝试 我正在努力:Java Bootstrap 3数据表导出到Excel不导出表数据,java,html,ajax,twitter-bootstrap,Java,Html,Ajax,Twitter Bootstrap,我正在尝试使用以下示例将表的内容导出到MS Excel: 我已经在页面上正确显示了所有内容;然而,当我导出时,我只得到标题和列标题。我正在用java生成表内容 页面图像: [![在此处输入图像描述][1][1] 输出: [![在此处输入图像描述][2][2] -------------------------------------------------------------------------------------- 第二次尝试 我已经改变了我的方法,现在正在传递json。但是,现在
$('#joinedTable').DataTable( {
"ajax": responseJson1a,
} );
我还尝试:
$('#joinedTable').DataTable( {
"ajax": JSON.stringify(responseJson1a),
} );
我还清理了图书馆
HTML:
这在控制台中给了我一个错误:
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)
未捕获类型错误:$(…)。DataTable不是函数
反对。(groupSummary ajax.js:70)
在i(在globalEval评估(jquery-2.2.4.min.js:2),:2:27449)
在Object.fireWith[as resolveWith](globalEval在globalEval(jquery-2.2.4.min.js:2),:2:28213)
在y(在globalEval评估(jquery-2.2.4.min.js:2),:4:22721)
在XMLHttpRequest.c(globalEval(jquery-2.2.4.min.js:2),:4:26925)
--------------------------------------------------------------------------------------
缩小错误范围
该错误不是由JSON填充HTML表引起的。“$('#joinedTable').DataTable();”位于“.done(函数(responseJson1a)”中会导致错误。在“$('#joinedTable').DataTable();”取消注释之前,以下操作一直有效。但是,只有
<tr>
<td>Cubs</td>
<td>3</td>
</tr>
<tr>
<td>Scouts</td>
<td>5</td>
</tr>
幼崽
3.
侦察兵
5.
是出口的,不是
<tr>
<td>Cubs</td>
<td>9</td>
</tr>
<tr>
<td>Scouts</td>
<td>10</td>
</tr>
幼崽
9
侦察兵
10
HTML:
小组总结
小组总结
显示详细信息
部分
加入
幼崽
3.
侦察兵
5.
阿贾克斯:
$(文档).ready(函数(){
$('[data toggle=“tooltip”]')。tooltip();
$('#joinedTable')。数据表({
“分页”:false,
“命令”:错误,
“信息”:错误,
“搜索”:错误,
dom:'Bfrtip',
按钮:[“复制”、“csv”、“excel”、“pdf”、“打印”],
} );
$(“#showGroupSummaryForm”)。验证({
//是的,
规则:{
起始日期:{
必填项:true
},
截止日期:{
必填项:true
}
},
信息:{
起始日期:{
必填:“请选择开始日期。”
},
截止日期:{
必填:“请选择结束日期。”
}
},
submitHandler:函数(showGroupSummaryForm){
$('#joinedTable tbody>tr')。删除();
$('#ajaxGetUserServletResponse1')。文本('';
var dataToBeSent={
ssAccountID:sessionStorage.getItem('ssAccountID'),
起始日期:$(“#起始日期”).val(),
结束日期:$(“#结束
<tr>
<td>Cubs</td>
<td>3</td>
</tr>
<tr>
<td>Scouts</td>
<td>5</td>
</tr>
<tr>
<td>Cubs</td>
<td>9</td>
</tr>
<tr>
<td>Scouts</td>
<td>10</td>
</tr>
<!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>
$(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);
});
});
$(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);
});
});
$('#example').DataTable( {
"ajax": 'pathToYourController',
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
var table = $('#joinedTable').DataTable( {
table.clear();
table.rows.add(responseJson1a).draw();
<!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>
$(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);
});
});