Ordering (sortTable)

Asked

Viewed 25 times

0

I’m trying to create a sort in the columns of a table but it does not command minor > major and major > minor and still takes all the styling of table:

Note. Table content is dynamically supplied.

Obs¹. I have tried several plugins but none worked.

Follows code:

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;
                }
            }
        }
  • 1

    Have you also tried https://datatables.net/ ? Works very well

  • 1

    or if you still prefer to make your own funciton, see this: http://jsfiddle.net/g9eL6768/2/

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.