|
<< Click to Display Table of Contents >> Table - SortTable |
  
|
|
<< Click to Display Table of Contents >> Table - SortTable |
|
Tela
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>