这是我第一次使用ajax，请帮帮我， 问题是，当我调用ajax函数响应正在加载表数据列表但高级图表和excel导出的javascript没有得到。在main.html中，我添加了span，因为当我点击报告和图表按钮时，我需要source.html的响应。
main.html中：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery.table2excel.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.scrollit {
overflow: scroll;
height: auto;
max-height: 350px;
width: 600px;
}
</style>
<script>
$(document).ready(function() {
$(".button").click(function() {
$(".table2excel").table2excel({
exclude : ".noExl",
name : "Excel Document Name"
});
});
});
function loadXMLDoc()
{
var urls="source.html";
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("report-response").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>
</head>
<body>
<br><br>
<br>
<input type="button" value="Reports and graphs" onclick="loadXMLDoc()">
<!--- this span response is from source.html -->
<span id="report-response"> </span>
<!--- -->
</body>
</html>
source.html：
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<script language = "JavaScript">
$(document).ready(function() {
$(".button").click(function() {
$(".table2excel").table2excel({
exclude : ".noExl",
name : "Excel Document Name"
});
});
});
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Daily Water Consumed'
};
var subtitle = {
text: 'Source: highcharts'
};
var xAxis = {
categories: ["18-10-2017","19-10-2017","20-10-2017","21-10-2017","22-10-2017","23-10-2017"],
crosshair: true
};
var yAxis = {
min: 0,
title: {
text: 'Water Consumed (litres)'
}
};
var tooltip = {
headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
'<td style = "padding:0"><b>{point.y:.1f} litres</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
column: {
pointPadding: 0.2,
borderWidth: 0
}
};
var credits = {
enabled: false
};
var series= [
{
name: 'Flow value',
data: [16,20,25,10,0,15],
color:'#0388e6'
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
<style>
.scrollit {
overflow: scroll;
height: auto;
max-height: 350px;
width: 600px;
}
</style>
<input type="button" value="export table to excel" class="button"/>
<br>
<hr>
<br>
<center>
<br>
<div style="display: flex; padding-left: 70px;">
<div class="scrollit">
<table class="table2excel">
<tr>
<th>Site Id</th>
<th>Serial Number</th>
<th>Date</th>
<th>Flow value</th>
<th>Cumulative value</th>
</tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
</table>
</div>
<div id="container" style="width: 700px; height: 400px;"></div>
</div>
</center>
<br/><br/>
</body>
</html>
答案 0 :(得分：0)
你可以这样做：dataTables.js jquery.js和html5按钮bootstrap ...用于跨浏览器。
$(document).ready(function() {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export excel',
className: 'exportExcel',
filename: 'Export excel',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'copy',
text: '<u>C</u>opie presse papier',
className: 'exportExcel',
key: {
key: 'c',
altKey: true
}
},
{
text: 'Alert Js',
className: 'exportExcel',
action: function(e, dt, node, config) {
alert('Activated!');
// console.log(table);
// new $.fn.dataTable.Buttons(table, {
// buttons: [{
// text: 'gfdsgfsd',
// action: function(e, dt, node, config) {
// alert('ok!');
// }
// }]
// });
}
}]
});
});.exportExcel{
padding: 5px;
border: 1px solid grey;
margin: 5px;
cursor: pointer;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<body>
<table id="example" class="table2excel display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Site Id</th>
<th>Serial Number</th>
<th>Date</th>
<th>Flow value</th>
<th>Cumulative value</th>
</tr>
</thead>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
<tr> <td> asdasd </td><td> asdas </td><td> asdas </td><td> asdas </td><td> asdas </td></tr>
</table>
</body>