Very first example does not work
Very first example does not work
achalk
Posts: 4Questions: 2Answers: 0
What am I doing wrong? Under "Zero Configuration" the text says "Searching, ordering and paging goodness will be immediately added to the table, as shown in this example."
I don't get any of that.
Thanks.
Here is my HTML file, which should incorporate exactly what is in the documentation:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body>
<table id="example" class="display dataTable" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<!--Rows omitted from this posted code for clarity -->
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</body>
</html>
This discussion has been closed.
Answers
Typically when the Datatables features don't appear or work there is a Javascript error causing the script to not complete. Check your browser's console for errors. If you need further help it will be best if you can link to your page or provide a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
BTW, you had 4 back ticks, instead of 3, at the bottom of your page which is why the formatting didn't work.
Kevin
I put your code into a test case here:
http://live.datatables.net/mocugedi/1/edit
You are getting this error:
I moved your
scriptincludes to the top of the file to fix the issue. jQuery needs to load before using$(document).ready(function() { .. } );Kevin
Thank you! Obviously, I need to understand file precedence in JS and CSS.
Just confirmed your fixes.
Appreciate the help -- and the speed of it. I'm back at work.
Yes, that is very important. Normally I place all the
scripttag includes at the end of thebodyinstead of the top. The theory is the initial page load will be faster.Kevin