Total newbie, cannot make small exampple work :(
Total newbie, cannot make small exampple work :(
Eracles
Posts: 2Questions: 0Answers: 0
Hi all, I'm a total newbie, I want to integrate ordering and search in my tables, but cannot make even the smallest example posible to work, dunno why.
This is it, a simple html. Note: the table appears without any styling, no row seperators.. none at all 
. What I'm doing wrong???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<title>Hello, world!</title>
</head>
<body>
<table id="example" class="display" 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>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</body>
</html>
EDIT: Updated code formatting to use Markdown code formatting.
This discussion has been closed.
Replies
I copied your code into this test case:
http://live.datatables.net/befakeci/1/edit
I see the following error in the browser's console:
Moved your
$(document).ready()code to the end of the code (after loading jQuery) and the code now works:http://live.datatables.net/lenalace/1/edit
Typically when the Datatables formatting and functions don't appear or work you have an error stopping the page loading. The first place to look is the browser's console for errors.
Kevin
Javascript is executed by the browser in order of the
scripttags (ignoring attributes such asdefer, etc).So the code above is telling it to execute
$(document).ready(...)before it has even loaded jQuery.Two options:
Allan
Ok, I see... Thanks! Now the example works. BUt.... the next sterp is to do the same into my webapp where I use templates for page layout and Bootstrap 4.
All pages share a common template with CSS declarations, and some page title, footer and body conent (loading tiles for body content and footer content).
It happens that I must have all javascript libraries loading at the right end of the <body> tag. If I move them to any other place, the page does not show correctly at all (and nothing is shown on Chrome console...). This is weird and driving me nuts, because in the previous html example I could move the loading sentences to the begining of the <body> without problems
I'm stuck on where to put the call and where to put the .js loading