Datatable not working in my Ghost blog

Datatable not working in my Ghost blog

Track9890Track9890 Posts: 7Questions: 2Answers: 0

Trying to use and test datables. My installation is not working. I've added the scripts and called the CSS. Added an id to my table. Don't know where to look.

The website is made with Ghost CMS. But anyway I used Jquery all along to call Datatable.

I would really appreciate if someone tell me what is wrong here :) The page is here : https://lefinrenard.com/index-des-prix-a-lepicerie/

And here's the script / css I added in the head + the html for the table.


<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" /> <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script> <script> $(document).ready(function () { $('#indexprix').DataTable(); }); </script> <div class="table-container kg-width-wide"> <table id="indexprix"> <thead> <tr> <th>Produit</th> <th>Meilleur prix de l'année</th> <th>1er novembre 2023</th> <th>Épicerie</th> <th>7 novembre 2023</th> <th>Épicerie</th> </tr> </thead> <tbody> <tr> <td>Boeuf haché mi-maigre (prix/lbs)</td> <td></td> <td>3.77 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Porc haché (prix/lbs)</td> <td></td> <td>2.33 $</td> <td>Maxi</td> <td></td> <td></td> </tr> <tr> <td>Cuisses de poulet (prix/lbs)</td> <td></td> <td>1.49 $</td> <td>Metro</td> <td></td> <td></td> </tr> <tr> <td>Poitrines de poulet (prix/lbs)</td> <td></td> <td>6 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Poulet entier (prix/lbs)</td> <td></td> <td>2.29 $</td> <td>Adonis</td> <td></td> <td></td> </tr> <tr> <td>Épaule de porc (prix/lbs)</td> <td></td> <td>3 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Filet de porc (prix/lbs)</td> <td></td> <td>3.99 $</td> <td>Metro</td> <td></td> <td></td> </tr> <tr> <td>Pommes de terre blanches - 10 lbs</td> <td></td> <td>5.99 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Carottes - 5 lbs</td> <td></td> <td>4.99 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Céleri</td> <td></td> <td>3 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Brocoli</td> <td></td> <td>2 $</td> <td>Adonis</td> <td></td> <td></td> </tr> <tr> <td>Choux fleur</td> <td></td> <td>3.97 $</td> <td>Walmart</td> <td></td> <td></td> </tr> <tr> <td>Faux filet de boeuf (prix/lbs)</td> <td></td> <td>13.02 $</td> <td>Adonis</td> <td></td> <td></td> </tr> <tr> <td>Filet mignon de boeuf (prix/lbs)</td> <td></td> <td>14.99 $</td> <td>Adonis</td> <td></td> <td></td> </tr> <tr> <td>Filet de saumon frais atlantique</td> <td></td> <td>8.99 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Beurre</td> <td></td> <td>5.44 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Oeufs</td> <td></td> <td>2.44 $</td> <td>Metro</td> <td></td> <td></td> </tr> <tr> <td>Bacon</td> <td></td> <td>4.49 $</td> <td>Metro</td> <td></td> <td></td> </tr> <tr> <td>Rôti de palette de boeuf</td> <td></td> <td>4.99 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Jus d'orange frais</td> <td></td> <td>3.49 $</td> <td>IGA</td> <td></td> <td></td> </tr> <tr> <td>Bifteck d'aloyau</td> <td></td> <td>7.99 $</td> <td>Adonis</td> <td></td> <td></td> </tr> <tr> <td>Bleuets</td> <td></td> <td>4.99 $</td> <td>Provigo</td> <td></td> <td></td> </tr> <tr> <td>Fraises</td> <td></td> <td>2.99 $</td> <td>Provigo</td> <td></td> <td></td> </tr> <tr> <td>Mini concombres</td> <td></td> <td>1.5 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Oranges</td> <td></td> <td>2 $</td> <td>Super C, Metro</td> <td></td> <td></td> </tr> <tr> <td>Tomates en dés</td> <td></td> <td>1.49 $</td> <td>Maxi</td> <td></td> <td></td> </tr> <tr> <td>Mayonnaise</td> <td></td> <td>5.45 $</td> <td>Super C</td> <td></td> <td></td> </tr> <tr> <td>Bananes</td> <td></td> <td>0.89 $</td> <td>Metro</td> <td></td> <td></td> </tr> <tr> <td>Sirop d'érable (540 ml)</td> <td></td> <td>5.88 $</td> <td>IGA</td> <td></td> <td></td> </tr> </tbody> </table> </div>

Answers

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691

    Look at the browser's console and you will see these errors:

    Uncaught ReferenceError: jQuery is not defined

    and

    Uncaught TypeError: $(...).DataTable is not a function

    This is due to loading jquery.js last. Datatables requires jquery.js to be loaded. Reverse the order of lines 2 and 3 then the Datatable should work.

    Kevin

  • Track9890Track9890 Posts: 7Questions: 2Answers: 0

    Thanks @kthorngren !

    Just inversed line 2 and 3. I still have an error for the Datatable function not a function.

    Any idea why?

    Here the code in my <head>

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691

    You are loading jquery.js twice. Once on line 218 before datatables.js - which is good. The second is on line 608. This is causing the problem as this is the jquery instance being used which doesn't have datatables.js associated with it. Remove line 608.

    Kevin

  • Track9890Track9890 Posts: 7Questions: 2Answers: 0

    Big thanks again @kthorngren !

    When i remove the second jquery call in Chrome inspector the datatable is not functionning. I will try to remove it from the source (templates).

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691

    I just checked your site and it seems to be working. Is there something specific that is not working as expected?

    Kevin

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    Working here was well. I'd suggest adding style="width: 100%" to the table though.

    Allan

  • Track9890Track9890 Posts: 7Questions: 2Answers: 0

    Solved!

Sign In or Register to comment.