First time user - DataTables not Working
First time user - DataTables not Working
Chazza
Posts: 10Questions: 4Answers: 0
Hi
I have set up a simple webpage index.html It is just a file on my PC and not hosted on a server. I can not get DataTables to work. Should the following html work as I am using the external Links for JSQuery and DataTables under <head> my HTML is as follows;
<!DOCTYPE html>
<html>
<head>
<title>Test Datables</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
});
</script>
</head>
<body>
<p>Test Table</p>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>21</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>46</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>50</td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>26</td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>18</td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>13</td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>23</td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>14</td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
EDIT: Updated Markdown formatting to change triple single quotes to triple backticks.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I copied your code here for a test case:
http://live.datatables.net/pefomuta/1/edit
You are getting this error in the browser's console:
You have this:
Its missing the closing
})for$(document).ready(. See the updated example here:http://live.datatables.net/kujuvexi/1/edit
Now its getting this error because you have an invalid link to the Datatable CDN:
You have https://cdn.datatables.net/1.10.16/ . If you click on it a web page with release notes appears. Also 1.10.16 is old, you should use the current version. Use the Download Builder to get the latest versions.
You are also missing the datatables.css for the table styling. I updated the test case with both from the download builder.
Kevin
Hi Kevin
Oops! elementary mistake I made there forgetting the closing })
I have now got it working and added in the css
Many thanks for your insightful input on this. I now have it working and can now hopefully make progress.
Regards
Chazza