带代表符号的排序表

Question

我有一个如下的排序功能代码。单击时，我想在字段的右侧创建向上箭头（数据按升序排列）或底部箭头（数据按降序排列）。请指教。谢谢

示例字段：

M' * X' = Y'

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};

table {width: 100%;font: 12px arial;}
th, td {min-width: 40px;text-align: center;}
th {font-weight: bold;}

Answer 1

使用Bootstrap 3的解决方案。

• 在项目中添加bootstrap
• 像这样向您的Age添加ID和图标：

<th>

• 添加js代码以在点击时切换图标。

<th id="sort-col-1">c1<span class="glyphicon glyphicon-sort-by-attributes pull-right" aria-hidden="true"></span></th>

您可以选择切换到其他图标，特别是从Bootstrap中切换时，重要的部分是单击时即可切换它们的代码。

Example in js fiddle