Using DataTables in BigCommerce theme

claytonm

I am trying to integrate DataTables into my BigCommerce theme but even though I believe to have included the correct css files and js files into the header section, I am still not getting any functionality in my tables. The tables do show styling from the style sheets but there is no search box, no ability to sort, no pagination, etc
I'm not sure where to go next for help so I came here. what can I try next?

claytonm

Here is a link to the page
view-source:https://www.realstreettactical.com/blog/sig-sauer-300-blackout-spear-lt-vs-rattler-vs-canebrake-comparison/

If you view the source you can see which CDN urls im bringing in

kthorngren

The place to start is to look for errors in the browser's console. The first error I see is this:

Uncaught ReferenceError: jQuery is not defined

It doesn't look like you are loading jquery.js, which Datatables requires to run. See the Dependencies docs for details. Make sure to load jquery.js before loading dataTables.min.js. You can use the Download builder to get jquery.js.

Kevin

claytonm

I believe I have made the appropriate fix to eliminate that error but I am still seeing the same problem. What is weird to me, is that when I load the HTML and JS into an HTML Block within the BigCommerce page builder, I can see the fully functional datatable in edit mode. But as soon as I click Publish and the page refreshes after saving my changes, all the functionality disappears and never makes it to the front end.

kthorngren

You are loading datatables.js version 2.0.7 on line 1095. Then you are loading 2.0.6 on lines 4041 and 4043. Problems can be caused by duplicating both .css and .js loads. Remove the 2.0.6 references.

Starting on line 2890 you are initializing the Datable just before the table is inserted into the document:

<script>
  new DataTable('#example');
</script>

<table id="example" class="table table-striped" style="width:100%">

Make sure to init Datatables after the table is placed in the document. Maybe use something like $( document ).ready().

Plus there are other errors in the browser's console. These don't look to be Datatable related errors but they could be causing the Javascript interpreter to stop processing the page.

Kevin

claytonm

Moving the initialization to after the table made it work. Thank you!