I'm trying to create a sort order in the columns of a table but it does not sort smaller > greater and greater > smaller and still strip all the styling of the table :
Obs. The contents of the table are populated dynamically.
Obs¹. I've tried using several plugins but none worked.
Follow the code below:
Table:
<div class="row" style="padding: 1%; max-height: 400px; overflow: auto; width: 100%;">
<table id="tbAtivacao" data-toggle="table" class="table table-striped" data-sort-order="desc">
<thead>
<tr>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',0)">ID</a></th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',1)"></a>Nome</th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',2)"></a>Pedidos</th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',3)"></a>Data Pagamento</th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',4)"></a>Pontos Pessoais</th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',5)"></a>Pontos Multilevel</th>
<th scope="col"><a href="#" onclick="sorting('tbAtivacao',6)"></a>Pontos Graduação</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Sort Function:
function sorting(table, index) {
var index; // cell index
var toggleBool; // sorting asc, desc
tbody = $("#" + table);
this.index = index;
if (toggleBool) {
toggleBool = false;
} else {
toggleBool = true;
}
var datas = new Array();
var tbodyLength = tbody[0].rows.length -1;
for (var i = 1; i <= tbodyLength; i++) {
datas[i] = tbody[0].rows[i];
}
// sort by cell[index]
datas.sort(compareCells, toggleBool);
for (var i = 0; i < tbody[0].rows.length -1; i++) {
// rearrange table rows by sorted rows
tbody[0].appendChild(datas[i]);
//$("#tbody")[0].appendChild(datas[i]);
}
}
function compareCells(a, b, toggleBool) {
var aVal = a.cells[index].innerText;
var bVal = b.cells[index].innerText;
aVal = aVal.replace(/\,/g, '');
bVal = bVal.replace(/\,/g, '');
if (toggleBool) {
var temp = aVal;
aVal = bVal;
bVal = temp;
}
if (aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)) {
return parseFloat(aVal) - parseFloat(bVal);
}
else {
if (aVal < bVal) {
return -1;
} else if (aVal > bVal) {
return 1;
} else {
return 0;
}
}
}