Table - SortTable

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Table - SortTable

Previous pageReturn to chapter overviewNext page

Tela

sortable_table2

Link

 

https://kryogenix.org/code/browser/sorttable

 

Html completo

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
     .linky {
       color: black;
    }
    
    table.colright td:nth-child(3) {
       text-align: right;
     }
    table.colright td:nth-child(4) {
       text-align: center;
     }
    table.colright td:nth-child(5) {
       text-align: right;
     }
  </style>
</head>
 
<body>
   <div class="container" style="margin-top: 20px">
       <div class="row"><div class="col-8">
           <p>Fonte: <a href="https://kryogenix.org/code/browser/sorttable/" target="_blank">https://kryogenix.org/code/browser/sorttable/</a></p>
       </div></div>
       <div class="row">
           <div class="col-8">  
               <table id="tabela" class="sortable table table-striped table-bordered table-sm colright" cellspacing="0" width="100%">
                 <thead>
                   <tr>
                     <th class="th-sm"><a href="#" class="linky">Name</a>
                     </th>            
                     <th class="th-sm sorttable_nosort">Cidade
                     </th>            
                     <th class="th-sm text-right"><a href="#" class="linky">Idade</a>
                     </th>            
                     <th class="th-sm text-center"><a href="#" class="linky">Nasc</a>
                     </th>            
                     <th class="th-sm text-right"><a href="#" class="linky">Salário</a>
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                     <tr><td>Lara Croft</td>  <td>Inglaterra</td> <td>29</td>  <td>02/12/1996</td> <td sorttable_customkey="11506.00">11.506,00</td> </tr>
                     <tr><td>Aloy</td>        <td>Futuro</td>     <td>19</td>  <td>22/11/1977</td> <td sorttable_customkey="550.00">550,00</td> </tr>
                     <tr><td>Kassandra</td>   <td>Grecia</td>     <td>26</td>  <td>11/10/1991</td> <td sorttable_customkey="3540.00">3.540,00</td> </tr>
                     <tr><td>Alexios</td>     <td>Grecia</td>     <td>21</td>  <td>12/09/2016</td> <td sorttable_customkey="4300.00">4.300,00</td> </tr>
                     <tr><td>Natan Drake</td> <td>EUA</td>        <td>35</td>  <td>10/08/2011</td> <td sorttable_customkey="1.20">1,20</td> </tr>
                     <tr><td>Mario</td>       <td>Japão</td>      <td>41</td>  <td>31/07/2002</td> <td sorttable_customkey="6955.00">6.955,00</td> </tr>
                     <tr><td>Luigi</td>       <td>Japão</td>      <td>39</td>  <td>30/07/2002</td> <td sorttable_customkey="9.99">9,99</td> </tr>
                     <tr><td>Samus</td>       <td>Espaço</td>     <td>32</td>  <td>30/06/1993</td> <td sorttable_customkey="6900.00">6.900,00</td> </tr>
                     <tr><td>Zemo</td>        <td>Brasil</td>     <td>100</td> <td>03/05/1999</td> <td sorttable_customkey="6999.00">6.999,00</td> </tr>
                 </tbody>
                 <tfoot>
                   <tr>
                     <th class="th-sm text-right">10 registros
                     </th>
                     <th>
                     </th>
                     <th>
                     </th>
                     <th>
                     </th>
                     <th class="th-sm text-right">1.500,10
                     </th>
                   </tr>
                 </tfoot>
               </table>  
            </div>
        </div>  
   </div>
   <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script src="sorttable.js"></script>
</body>
</html>