datatable not working
datatable not working
Link to test case:
Debugger code (debug.datatables.net):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.jqueryui.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript">
$(document).ready(
alert("hi");
function() {
$('#workshop_list').DataTable();
} );
</script>
</head>
<body>
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($link === false){
echo "DB Connect Problem";
die("ERROR: Could not connect. " . mysqli_connect_error());
}
//else echo "DB Connect Success";
// Attempt select query execution
$sql = "SELECT workshops.title as name, workshops.id as id, subjects.title as subject, workshops.description as description
FROM workshops INNER JOIN subjects ON workshops.subject_id=subjects.id WHERE visibility_id<>8";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){ ?>
<table id="workshop_list">
<thead>
<tr>
<th>Titre</th>
<th>Sujet</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{ ?>
<tr>
<td><?php echo $row['name'] ;?></td>
<td><?php echo $row['subject'] ;?></td>
<td><?php echo $row['description'] ;?></td>
<td>
<div class="btn-group pull-right">
<button class="btn btn-default btn-s dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i></button>
<ul class="dropdown-menu">
<a class="dropdown-item" href="/wp-content/php/school_admin/wksp_update.php?id=<?php echo " $row[id] " ?>" class="mr-3" title="Update Record" data-toggle="tooltip"><span class="fa fa-pencil"></span> Modifier</a>
<a class="dropdown-item" href="/wp-content/php/school_admin/schl_archive.php?id=<?php echo " $row[id] " ?>" title="archive" data-toggle="tooltip"><span class="fa fa-archive"></span> Archiver</a>
</ul>
</div>
</td>
</tr> <?php
} ?>
</tbody>
</table>
<?php
// Free result set
mysqli_free_result($result);
} else{
echo '<div class="alert alert-danger"><em>No records were found.</em></div>';
}
} else{
echo "Oops! Something went wrong. Please try again later. <br>"
. mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</body>
</html>
Error messages shown:
No error messages
Description of problem:
I am working on the website page on WordPress using 'xyz php code' plugin. My code is as shown above.
The table is outputting without issues, I have no error messages, but the datatable features are not showing (sort, search, show). I have a display of the 200+ rows of my table display on one page.
I am not sure what the issue is or if its just datatable not being compatible with the plugin im using, but would think that that's the problem.
Please help.
Thank you in advance
Answers
Did you look at the browser's console for errors? I suspect you will see something about length of undefined or cellIndex. Looks like you have 3 header columns but for columns in the
-tg tbodyfor each row. Datatables requires a -tag th` for each column.Kevin
hello @kthorngren,
I am not sure I know what you mean. True that my table contains three columns which i enclosed in the 'th' tag.
Should I have done it differently?
I have checked the browser console and this is the error I get:
Sounds like you aren't including the datatables.js library or the order of your includes is incorrect.
You have four columns in your
tbody. For Datatbles you need to have the same number of columns in the header as in the tbody.Kevin
Hey @kthorngren,
I have added the fourth header, and i am not able to see what dataTable library i did not include.
I still have the same issue
I noticed your first code snippet shows what you are loading. You are loading jquery.js twice, once in line 5 and the other in line 7. Only load jquery.js once otherwise you will run into these types of issues where the libraries attach to the wrong jquery instance.
Kevin
Hey Kevin,
Founf the solution,
I replaced $ by jQuery and the issues was fixed with errors.
@kthorngren