Datatable not working in my Ghost blog
Datatable not working in my Ghost blog
Track9890
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
Look at the browser's console and you will see these errors:
and
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
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>
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
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).
I just checked your site and it seems to be working. Is there something specific that is not working as expected?
Kevin
Working here was well. I'd suggest adding
style="width: 100%"to thetablethough.Allan
Solved!