JavaScript — кнопки экспорта не работают для экспорта данных
В моем приложении пользователь должен иметь возможность экспортировать свои результаты.
Пользователь выбирает анализ крови, который он хочет видеть, и даты результатов, которые он хочет видеть.
Когда они нажимают кнопку «Отправить», появляется таблица с данными анализа крови.
Затем я хочу, чтобы они могли нажимать такие кнопки, как «Копировать», «CSV», «Excel», «PDF» и т. Д. И таблицу следует экспортировать вместе с данными.
В идеале было бы неплохо, если бы кнопки не появлялись до тех пор, пока пользователь не нажмет на submit и таблица не сгенерирует данные, но на данный момент я просто хочу, чтобы кнопки появлялись и проверяли, работают ли они.
Я не уверен, где я ошибаюсь, я ссылался на сайт, с которого я получил это в коде, и здесь — https://datatables.net/extensions/buttons/examples/initialisation/export.html
Добавленный код находится в строках со всеми звездочками — ***************
Код ниже:
<?php
session_start();
include('dbConnect.php');
if (!isset($_SESSION["currentUserID"])) header("Location: login.php");
$queryStr=("SELECT * FROM category");
$dbParams=array();
// now send the query
$results = $db->prepare($queryStr);
$results->execute($dbParams);
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>New Test</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/business-casual.min.css" rel="stylesheet">
<!-- Bootstrap core JavaScript
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<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>
-->
<!-- referenced for help - https://datatables.net/extensions/buttons/examples/initialisation/export.html - ******************************************************************************************************** -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/new-age.min.js"></script>
<script>
$(document).ready(function() {
$('#resultsTable').DataTable
({"paging":true,
dom: 'Bfrtip',
"ordering": false,
buttons: [
'csv', 'excel', 'pdf', 'print'
]});
} );
</script>
<!-- ******************************************************************************************************** -->
</head>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-lower">Smart Chart</span>
</h1>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item active px-lg-4">
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="addBlood.php">Add Result</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="addCategory.php">Add Category</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="chart.php">Smart Chart</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="editAccount.php">My Account</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="logout.php">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<html>
<head>
<!-- Help for code to create dynamic drop downs -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getTest(val) {
$.ajax({
type: "POST",
url: "get_test.php",
data:'category_id='+val,
success: function(data){
$("#test-list").html(data);
}
});
}
function selectCategory(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
<div class="frmDronpDown">
<div class="row">
<form method="post">
<div class="row">
<label>Category:</label><br/>
<select name="category" id="category-list" class="demoInputBox" onChange="getTest(this.value);">
<option value="">Select Category</option>
<?php
foreach($results as $category) {
?>
<option value="<?php echo $category["category_id"]; ?>"><?php echo $category["category_name"]; ?></option>
<?php
}
?>
</select>
</div>
<label>Test:</label><br/>
<select name="test" id="test-list" class="demoInputBox">
<option value="">Select Test</option>
</select>
</div>
</div>
<label>Start Date:</label><input class="input" name="date1" type="date"><br>
<label>End Date:</label><input class="input" name="date2" type="date"><br>
<input class="submit" name="submit" type="submit" value="Submit">
</form>
<body>
<?php
if(isset($_POST['submit'])){
$currentUser = $_SESSION["currentUserID"];
$currentBloodTest = $_POST['test']; // name of the 'select' element
$categoryid = $_POST['category'];
$date1 = date_format(date_create($_POST['date1']),"Y-m-d ");
$date2 = date_format(date_create($_POST['date2']),"Y-m-d ");
//$dataRes=array();
$strQuery=("select * from results as R JOIN bloodtests as B ON B.bloodtest_id=R.bloodtest_id WHERE R.user_id='$currentUser' and B.bloodtest_id='$currentBloodTest' and R.date >= '$date1' and R.date <= '$date2' ORDER BY R.date ASC");
$dbQuery = $db->prepare($strQuery);
$dbQuery->execute(array());
//$test_name=$dbQuery['test_name'];
//echo "<h1>Results for </h1>";
echo "<table id='resultsTable' border='2' cellspacing='0' cellpadding='2' align='center' width='400' height='300'>
<tr>
<th>Value</th>
<th>Date</th>
<th>Comments</th>
</tr>";
for($i=0; $row = $dbQuery->fetch(); $i++){
?>
<br>
<tr>
<td><?php echo $row['value']; ?></td>
<td><?php echo $row['date']; ?></td>
<td><?php echo $row['comments']; ?></td>
</tr>
<?php
}
echo "</table>";
}
?>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …
detector