bepster bepster - 2 months ago 19
HTML Question

Difficulty implementing jQuery Datatables

Evening all,

I am trying to add the "datatables" jQuery script to my website however I can't get it to work at all!

From reading the instructions I need to download the latest version of jQuery production and put in the same folder as the page I'm trying to use it on. e.g. the file is in Pages > jquery-3.1.0.min.js

I should then include this in the header of the file I am using see "jQuery Link" comments in the code below

After this I should then download datatables as I would like it from the builder e.g: https://datatables.net/download/ - I have opted for the local files as the site is for internal use only so no need to access resources online. So now my folder structure looks like Pages > DataTables > ...

So now I add the JS and CSS to the header as well see "jQuery CSS" and "jQuery JS" comments in the code below

I then draw the table as required by datatables see "Table start" "Table End" comments in the code below

I then call the JS see "Call script start" "Call script end" comments.

Now when I run this page there is no formatting at all on the table?!

I am sure I'm missing something very simple!

<!DOCTYPE html>
<head>
<!-- jQuery Link -->
<script src="jquery-3.1.0.min.js"></script>

<!--jQuery CSS -->
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

<!--jQuery JS -->
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
</head>
<body>

<!-- Table start -->
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<!-- Table end -->

<!-- Call script start -->
<script>
$(document).ready( function () {

$('#table_id').DataTable()

} );
</script>
<!-- Call script end -->
</body>

</html>

Answer

Your code seems to work: http://jsfiddle.net/ohy2xtud/ Is there any console output? Maybe you have problems including your scripts/stylesheets. Are you sure that /DataTables/datatables.js is the correct way to reference your script file (same with the css)? you would look in the DataTables folder of your web root directory and not in the project directory as with your jQuery file.

I would try to include your links remotely:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js

That should work. You can still download them afterwards if that works. For local file offering you would need to tell us the exact project structure. Are all the scripts and stylesheets in the same directory as your HTML file? Also you can try to use the CDN versions locally instead of the generated files from datatables.net

Comments