我正在尝试使用以下示例将表的内容导出到 MS Excel:https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
页面上的所有内容都正确显示；但是，当我导出时，我只得到标题和列标题。我正在用 java 生成表内容。
页面图片:
[![在此处输入图像描述][1]][1]
输出:
[![在此处输入图像描述][2]][2]
-------------------------------------------------------- ------------------------------------------ 第二次尝试
我改变了我的方法，现在正在传递 json。但是，现在按钮未显示，表格也未格式化。控制台日志中没有错误。
-------------------------------------------------------- ------------------------------------------ 第三次尝试
好的，我已经弄清楚如何传递 JSON 并使用 AJAX 来填充表。但是，导出到 Excel 仍然只导出名称和表格标题。
-------------------------------------------------------- ------------------------------------------ 第四次尝试
我正在尝试:
$('#joinedTable').DataTable( {
"ajax": responseJson1a,
} );
我也尝试过:
$('#joinedTable').DataTable( {
"ajax": JSON.stringify(responseJson1a),
} );
我已经清理了库。
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);
});
});
这在控制台中给我一个错误:
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)
-------------------------------------------------------- ------------------------------------------ 缩小错误范围
该错误不是由于 HTML 表是从 JSON 填充的。 “$('#joinedTable').DataTable();”位于“.done(function(responseJson1a)”中会导致错误。下面的代码一直有效，直到“$('#joinedTable').DataTable();”未被注释。但是，只有
<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>
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);
});
});
最佳答案
您正在填充表之前初始化dataTable，这就是为什么它看不到您通过ajax获取的任何动态数据。将初始化代码放在数据表渲染之后(参见下面的 -- 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);
});
});
另一种避免您自己填充表格的方法是将 JSON feed 的 url 直接传递给 dataTable 插件，并让表格处理 >ajax 和数据群体。 Controller 必须以指定的格式返回数据here
$('#example').DataTable( {
"ajax": 'pathToYourController',
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
关于java - Bootstrap 3 DataTable导出到Excel不导出表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50771785/