Résumé de w3P.js

Utilisation de w3.sortHTML()

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.