Using DataTables in BigCommerce theme

Using DataTables in BigCommerce theme

claytonmclaytonm Posts: 4Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • claytonmclaytonm Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • claytonmclaytonm Posts: 4Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited May 11 Answer ✓

    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

  • claytonmclaytonm Posts: 4Questions: 1Answers: 0

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

Sign In or Register to comment.