Unable to initialize datatables in html within a php file
Unable to initialize datatables in html within a php file
nospipi
Posts: 5Questions: 2Answers: 0
i transfered my entire html to a php file,to be able to work with a mysql database i already have,and i cant seem to be able to initialize properly,its not working,any ideas ?
<?php
header('Access-Control-Allow-Origin: *');
//connect to db
$conn = mysqli_connect('localhost','*****','********','***********');
//check connection
if(!$conn){
echo 'Connection error: ' . mysqli_connect_error();
}
//WRITE QUERY FOR ALL RECORDS
$sql = 'SELECT * FROM forms ORDER BY systemdate DESC';
//MAKE QUERY AND GET RESULTS
$result = mysqli_query($conn, $sql);
//FETCH THE RESULTING ROWS AS AN ARRAY
$forms = mysqli_fetch_all($result, MYSQLI_ASSOC);
////INSERT INTO DATABASE
//if(isset ($_REQUEST["name"]) ){
//$name = $_REQUEST["name"];
//$content = $_REQUEST["content"];
//$datetime = $_REQUEST["datetime"];
//
//$sql1 = "INSERT INTO forms (name, contents, date)
//VALUES ('$name', '$content','$datetime')";
//
//if ($conn->query($sql1) === TRUE) {
// echo "New record created successfully";
// exit;
// }else {
// echo "Error: " . $sql1 . "<br>" . $conn->error;
// exit;
// }
//};
//
////DELETE DB RECORD
//if(isset ($_REQUEST["delete"]) ){
//$id = $_REQUEST["delete"];
//$sqlId = "DELETE FROM forms WHERE id=$id ";
//if ($conn->query($sqlId) === TRUE) {
// echo "Form deleted from database succesfully";
// exit;
// }else {
// echo "Error: " . $sqlId . "<br>" . $conn->error;
// exit;
// }
//};
////FREE RESULT FROM MEMORY
//mysqli_free_result($result);
////CLOSE CONNECTION
//mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<script src="https://kit.fontawesome.com/2608ace323.js" crossorigin="anonymous"></script>
<script src="main.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
<script type="text/javascript">
</script>
</head>
<body>
<!-- Start your project here-->
<div id="tablewrap"><button id="testbutton">TEST</button>
<table id="dtVerticalScrollExample" class="table table-striped table-bordered table-sm" cellspacing="0"
width="100%">
<thead>
<tr>
<th class="th-sm">ID<i class="fas fa-sort" style="float: right"></i>
</th>
<th class="th-sm">NAME<i class="fas fa-sort" style="float: right"></i>
</th>
<th class="th-sm" colspan="2">DATE CREATED<i class="fas fa-sort" style="float: right"></i>
</th>
</tr>
</thead>
<tbody>
<?php foreach ($forms as $form){?>
<tr>
<td id="this-id"><?php print htmlspecialchars($form['id']); ?></td>
<td><?php print htmlspecialchars($form['name']); ?></td>
<td><?php print htmlspecialchars($form['date']); ?></td>
<td><input type="button" id="delete" value="DELETE"></td>
</tr><?php }?>
</tbody>
</table>
</div>
<!-- End your project here-->
<style>
#tablewrap{
position: absolute;
border: 1px solid grey;
padding: 2px;
top: 50px;
left: 50px;
}
.dataTables_filter{
float: right!important;
margin-bottom: 2px;
}
.dataTables_filter input {
margin-left: 5px;
height: 23px;
}
</style>
<!-- MDB -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#dtVerticalScrollExample').DataTable({
"paging": false,
"bInfo" : false,
"scrollY": "100px",
"scrollCollapse": true
});
$('.dataTables_length').addClass('bs-select');
});
$(document).on('click', '#testbutton', function() {
alert("poutsa");
});
</script>
<!-- Custom scripts -->
</body>
</html>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
What exactly happens? Do you get errors in the browser's console?
Kevin
In the future you can search the forum for error messages like this and find threads with the solution. In your case the problem is you defined 3 columns in your
theadbut have 4 columns in your rows. For Datatables to work and add its controls like sorting thetableneeds to have the same number of columns in thetheadas is in the table rows.Kevin
understood,thank you.