Adding jQuery and Datatable to assets

dpatschke commented 8 months ago

Please forgive me if this is completely obvious, but I'm new to Hugo and new to web development in general.
This is a fantastic template with wonderful modularity and I'm trying to modify it for my usage as well as leverage it to learn Hugo.

I'm trying to add the jQuery and jQuery Datatable libraries to the template and am experiencing some challenges.

Within hugo.toml I have added the following lines:

# CSS Plugins
[[params.plugins.css]]
link = "https://cdn.datatables.net/1.13.8/css/jquery.dataTables.css"
lazy = false
# JS Plugins
[[params.plugins.js]]
link = "https://code.jquery.com/jquery-3.7.1.js"
lazy = false
[[params.plugins.js]]
link = "https://cdn.datatables.net/1.13.8/js/jquery.dataTables.js"
lazy = false

The site renders without error and the table is displayed. However, it is not leveraging the Datatable library.

According to the following link, I was hoping the third-party libraries would work by loading them this way, but it doesn't look like it is.
I'm testing it with a relatively simple table that is being loaded in as a partial within the home page. The partial file (datatable.html) looks something like this:

<table id="datatable">
      <thead>
        <tr>          
            <th>Name</th>          
            <th>Age</th>          
            <th>City</th>          
        </tr>
      </thead>
      <tbody>        
          <tr>            
              <td>John</td>            
              <td>25</td>            
              <td>New York</td>            
          </tr>        
          <tr>            
              <td>Mary</td>            
              <td>30</td>            
              <td>Los Angeles</td>            
          </tr>
      </tbody>
    </table>
<script>
    $(document).ready( function () {
      $('#datatable').DataTable({
        colReoder: true,
        autoFill: true,
        buttons: true,
        fixedHeader: true,
        keyTable: true,
        responsive: true,
        rowReoder: true
      });
  } );
  </script>

I'm embedding the partial in index.html with the following just for test purposes:

{{ partial "datatable.html" }}

Thanks in advance for any help (or education) you may be able to provide me!

dpatschke commented 8 months ago

OK ... I figured it out.

While the plugin modularity present in hugo.toml is nice, it is not a "one-size fits all" solution for all third-party plugins.

The jQuery and Datatable scripts/links need to be placed in the <head> element of the page. I'm not sure why, but the CSS and JS plugins listed in hugo.toml get called in footer.html. Therefore, I could see the libraries getting imported when using Google Chrome Developer Tools but they were not where I was expecting.

My solution:

created a new custom-head.html partial in layouts/partials/essentials with the following content

<!-- Include jQuery library in header -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" 
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
crossorigin="anonymous">
</script>
<!-- Include DataTables CSS and JS files -->
<link href="https://cdn.datatables.net/v/dt/dt-1.13.8/datatables.min.css" rel="stylesheet"> 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.8/datatables.min.js"></script>

added the following line to layouts/_default/baseof.html within the <head> element {{ partial "essentials/custom-head.html" . }}

Table displayed as expected upon rebuild

ytrepidorosonomous commented 8 months ago

Remember to add defer to prevent the JS from being render blocking.

zeon-studio / hugoplate

Adding jQuery and Datatable to assets #79