DataTable doesn't work
DataTable doesn't work
estuardo1988
Posts: 1Questions: 0Answers: 0
My problem is the following, I have a page that contains a button, when clicking the button a table that reads data from a database is built, I have added the script to activate paging but it does not work, you can help me with this. Thank you.
This is my index.php
<!DOCTYPE html>
<html>
<title>Datatable</title>
<head>
<!-- Datatables-->
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />
<!-- Bootstrap and Jquery-->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<!-- Icons -->
<link rel="stylesheet" href="font/css/open-iconic-bootstrap.min.css">
<!-- Functions-->
<script type="text/javascript" language="javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<h3 align="center">DataTable Example</h3>
<button type="button" onclick="show_table()"> Create </button>
<div id="mydiv">
</div>
</div>
</body>
</html>
The following function runs in javascript when the button is clicked (script.js)
function show_table() {
var url = 'table.php';
var method = 'POST';
ajax (url, method, 'mydiv');
}
function ajax (url, method, container_id) {
try {
xhr = new XMLHttpRequest();
} catch(e) {
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) {
alert("Not supported!");
}
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
document.getElementById(container_id).innerHTML = xhr.responseText;
}
}
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send();
}
Here is the PHP that builds the table (table.php)
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$query = "select * from employee order by id desc";
$result = mysqli_query($connect, $query);
<?php
>
?>
<table id="employee-data" class="table table-striped">
<thead>
<tr>
<td>Employee name</td>
<td>Salary</td>
<td>Age</td>
<td>View</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["employee_name"].'</td>
<td>'.$row["employee_salary"].'</td>
<td>'.$row["employee_age"].'</td>
<td><button type="button" class="btn btn-outline-primary"><span class="oi oi-account-login"></span></button></td>
<td><button type="button" class="btn btn-outline-primary"><span class="oi oi-pencil"></span></button></td>
<td><button type="button" class="btn btn-outline-primary"><span class="oi oi-trash"></span></button></td>
</tr>
';
}
<?php
>
?>
</table>
<script>
$(document).ready(function() {
$('#employee-data').DataTable();
} );
</script>
This discussion has been closed.
Replies
Can you describe what exactly isn't working?
Do you get any alert messages or console log errors?
Does the table show but the Datatables features aren't working?
Its possible you are initializing Datatables (
$('#employee-data').DataTable();) before the table is built.Kevin