Datatables not working
Datatables not working
rajmalhotra
Posts: 3Questions: 1Answers: 0
I have a very simple html file, but I see only plain text data after the following code. I don't see any error in the console too.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Show Policies</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
</head>
<body>
<table id="#table_id" class="display">
<tbody>
<tr th:each="customers : ${policies}">
<td th:text="${customers.id}"></td>
<td th:text="${customers.type}"></td>
<td th:text="${customers.name}"></td>
<td th:text="${customers.description}"></td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.
Answers
Hi @rajmalhotra ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi @colin
Sorry for missing out on the rules. I've created a fiddle link. https://jsfiddle.net/rajmalhotra123/w5L2s3uq/2/. Let me know if you find any issue in this. Thanks in advance
You are missing the table header,
thead. You can place it directly in your HTML or you can usecolumns.title.Kevin
Thanks Kevin,
I tried adding the <th> tag here https://jsfiddle.net/rajmalhotra123/w5L2s3uq/4 and adding the column titles at https://jsfiddle.net/rajmalhotra123/w5L2s3uq/8 I still can't get the UI. ?
It looks like you haven't included any libraries - you need the CSS and JS. See download page here. I tried to update it but looks like jsfiddle is down for me (getting 502s)...
First you have a
#in thetableid:<table id="#table_id" class="display">.Remove the
#so it looks like this:<table id="table_id" class="display">.The
thneeds to be in atheadelement not in thetbody. Here is the updated example usingthead:https://jsfiddle.net/kvbcuf2p/
To use
columnDefsyou need to define thecolumnDefs.targets. However for your case you can just usecolumnsand define the title for each column. You also need to define a title for each column in the table. You have 4 columns in the table but are defining only 3 titles. Here is the updated example:https://jsfiddle.net/6o8deq41/
Kevin