How to make jquery.tablesorter work with DocPad?

StackOverflow https://stackoverflow.com/questions/20823816

  •  22-09-2022
  •  | 
  •  

Question

I am trying to use tablesorter.js with DocPad. I have added the required lines to docpad.coffee to load the css and js for the tablesorter, and I have added the call to tablesorter() in the page where I have the the table I want to sort.

However, the resulting tables do not sort properly for two reasons: All scripts are deferred (defer="defer") and the call to tablesorter() appears before the scripts are loaded, like this:

</tbody></table></p>
    <script>
    $(document).ready(function(){$("#mytable").tablesorter();})
    </script></div>
    </article>
    ...
<!-- Scripts -->
<script defer="defer" src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script defer="defer"  src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script defer="defer"  src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script defer="defer"  src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer"  src="/scripts/script.js"></script>
</body>

If I delete the defer stuff and move the tablesorter() call down, it works fine:

<!-- Scripts -->
<script src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/scripts/script.js"></script>
<script>
    $(document).ready(function(){$("#mytable").tablesorter();})
</script>
</body>

I need to get rid of the defer setting and I need to call tablesorter() after the scripts have been loaded. How can I do this in DocPad 6.59.6?

Was it helpful?

Solution

I found a fix and a workaround to get tablesorter working.

  • The sequence issue: In order to load all Javascript before the call to tablesorter(), I moved the scripts section in the default layout (src/layouts/default.html.eco) to be loaded as part of the <head/>, not as the lats part of the <body/> as it originally was.

  • The defer issue: I couldn't figure out how to modify Docpad's @getBlock('scripts') to not include the defer="defer" setting. The workaround was then to not use getBlock and instead just hardcode the references to the script files.

In summary, going from this:

<html>
...
<body>
...
<%- @getBlock('scripts')...
</body>
</html>

to this:

<html>
<head>
...
<script src="/vendor/jquery/...
...
</head>
<body>
...
</body>
</html>

fixed the problem. I now have a maintenance problem that I have to maintain the list of scripts within the layout (instead of using the scripts: section in docpad.coffee); I can live with that.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top