Datatables CSS Not Working on Custom Page?

Highlighted
New Member
2 0 0

Trying to use datatables.net for a searchable, sortable table. Neither the search nor sort features are working. Here is the page url: https://www.jtspencer.com/pages/majors-fantasy-challenge

 

Added the following to the theme.liquid file:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

{{ 'scripts.js.liquid' | asset_url | script_tag }}

Here is the code in the scripts.js.liquid file under assets:

 
<script type="text/javascript" class="init">
$(document).ready(function() {
	$('#example').DataTable();
} );
</script>
 

Not too familiar with Shopify or Javascript, any help would be appreciated. I need to get this working a week before the US Open begins (June 13).

0 Likes
Highlighted
Pathfinder
98 12 29

When you're posting scripts into a .js file you don't need the <script> tags, try using the below in your main .js file

$(document).ready(function() {
	$('#example').DataTable();
} );

 I've not seen a theme yet that uses .liquid after the .js extension so if that also doesn't work then create a new asset called datatables.js and paste the above in that, then when you link to it in your theme.liquid file put

 

  <script src="{{ 'datatables.js' | asset_url }}" defer="defer"></script>

Hope that helps

0 Likes
Highlighted
New Member
2 0 0

Thanks for your help. It is now working and set up just about how I want it.

 

I think it may have been conflicting versions of jQuery?

0 Likes
Pathfinder
98 12 29

The latest versions remove old functionality from what I've noticed so if you're using a function that's outdated it wouldn't work in the latest jQuery but not sure, I just make sure i match the original formatting as much as possible so when adding scripts i add defer="defer" also, simply because other library's have that added, then it's easier to narrow down any issues

0 Likes
Highlighted
New Member
1 0 0

Hi JTR,

 

I am trying to do the same, i.e. putting a datatable into my site.  I am going to try the suggestions posted in this discussion, but somehow noticed that nothing has been mentioned on where I should store my original data (e.g. in excel or csv format, and in what directory/location).

 

Can you kindly shed some light on where I should store my original data to make this work?

 

Thanks for your help in advance.

0 Likes