Data venant d'un objet
Name | Country |
---|---|
{{CustomerName}} | {{Country}} |
Code HTML :
<p>Data venant d'un objet JS</p> <table id="result" class="w3-table-all w3-hoverable"> <thead> <tr class="w3-black"> <th style="cursor:pointer" onclick="w3.sortHTML('#result','.item', 'td:nth-child(1)')" class="w3-black w3-hover-indigo"> Name </th> <th style="cursor:pointer" onclick="w3.sortHTML('#result','.item', 'td:nth-child(2)')" class="w3-black w3-hover-indigo"> Country </th> </tr> </thead> <tbody> <tr class="item" data-w3-repeat="customers"> <td> {{CustomerName}} </td> <td> {{Country}} </td> </tr> </tbody> </table>
Data codées en dur
Name | Country |
---|---|
Berglunds snabbköp | Sweden |
North/South | UK |
Alfreds Futterkiste | Germany |
Königlich Essen | Germany |
Magazzini Alimentari Riuniti | Italy |
Paris spécialités | France |
Island Trading | UK |
Laughing Bacchus Winecellars | Canada |
Code HTML :
<p>Data codées en dur</p> <table id="myTable" class="w3-table-all w3-hoverable"> <tr> <th onclick="w3.sortHTML('#myTable', '.item2', 'td:nth-child(1)')" style="cursor:pointer" class="w3-black w3-hover-indigo"> Name </th> <th onclick="w3.sortHTML('#myTable', '.item2', 'td:nth-child(2)')" style="cursor:pointer" class="w3-black w3-hover-indigo"> Country </th> </tr> <tr class="item2"> <td> Berglunds snabbköp </td> <td> Sweden </td> </tr> <tr class="item2"> <td> North/South </td> <td> UK </td> </tr> <tr class="item2"> <td> Alfreds Futterkiste </td> <td> Germany </td> </tr> ... <tr class="item2"> <td> Laughing Bacchus Winecellars </td> <td> Canada </td> </tr> </table>
Lorsque le tableau est grand, le tri est lent.
De plus, si on reclique, le tri inverse ne s'opère plus !
Ce n'est pas le cas ci-dessous, car les tableaux sont petits.