Exemples

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.

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', '.item', 'td:nth-child(1)')"
              style="cursor:pointer" class="w3-black w3-hover-indigo">
                Name
              </th>
              <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style=
              "cursor:pointer" class="w3-black w3-hover-indigo">
                Country
              </th>
            </tr>
            <tr class="item">
              <td>
                Berglunds snabbköp
              </td>
              <td>
                Sweden
              </td>
            </tr>
            <tr class="item">
              <td>
                North/South
              </td>
              <td>
                UK
              </td>
            </tr>
            <tr class="item">
              <td>
                Alfreds Futterkiste
              </td>
              <td>
                Germany
              </td>
            </tr>
            <tr class="item">
              <td>
                Königlich Essen
              </td>
              <td>
                Germany
              </td>
            </tr>
            <tr class="item">
              <td>
                Magazzini Alimentari Riuniti
              </td>
              <td>
                Italy
              </td>
            </tr>
            <tr class="item">
              <td>
                Paris spécialités
              </td>
              <td>
                France
              </td>
            </tr>
            <tr class="item">
              <td>
                Island Trading
              </td>
              <td>
                UK
              </td>
            </tr>
            <tr class="item">
              <td>
                Laughing Bacchus Winecellars
              </td>
              <td>
                Canada
              </td>
            </tr>
          </table>

Data venant un objet JS

Name	Country
{{CustomerName}}	{{Country}}

Code HTML :

          <p>Data venant 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','.item2', 'td:nth-child(1)')"
                 class="w3-black w3-hover-indigo">
                  Name
                </th>
                <th style="cursor:pointer" onclick=
                "w3.sortHTML('#result','.item2', 'td:nth-child(2)')"
                 class="w3-black w3-hover-indigo">
                  Country
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="item2" data-w3-repeat="customers">
                <td>
                  {{CustomerName}}
                </td>
                <td>
                  {{Country}}
                </td>
              </tr>
            </tbody>
          </table>