通过单击表头对表进行排序

假设我们要对下表的任何列进行排序：

<table id="sortMe" class="table">
    ...
</table>

对行进行排序

首先，我们查询所有的标头，遍历它们并为每个标头附加一个事件处理程序click：

// Query the table
const table = document.getElementById('sortMe');

// Query the headers
const headers = table.querySelectorAll('th');

// Loop over the headers
[].forEach.call(headers, function (header, index) {
    header.addEventListener('click', function () {
        // This function will sort the column
        sortColumn(index);
    });
});

上面提到的sortColumn(index)函数将按给定的列对所有行进行排序index。为此：

• 我们可以使用Array'sort()方法对当前行进行排序
• 然后，删除所有当前行
• 并附加已排序的行

// Query all rows
const tableBody = table.querySelector('tbody');
const rows = tableBody.querySelectorAll('tr');

const sortColumn = function (index) {
    // Clone the rows
    const newRows = Array.from(rows);

    // Sort rows by the content of cells
    newRows.sort(function (rowA, rowB) {
        // Get the content of cells
        const cellA = rowA.querySelectorAll('td')[index].innerHTML;
        const cellB = rowB.querySelectorAll('td')[index].innerHTML;

        switch (true) {
            case cellA > cellB:
                return 1;
            case cellA < cellB:
                return -1;
            case cellA === cellB:
                return 0;
        }
    });

    // Remove old rows
    [].forEach.call(rows, function (row) {
        tableBody.removeChild(row);
    });

    // Append new row
    newRows.forEach(function (newRow) {
        tableBody.appendChild(newRow);
    });
};

如您所见，数组提供了一个内置 sort方法，该方法接受一个函数来比较两个项目。在我们的例子中，列的两个单元格根据其 HTML 内容进行比较：

newRows.sort(function(rowA, rowB) {
    // Get the content of cells
    const cellA = rowA.querySelectorAll('td')[index].innerHTML;
    const cellB = rowB.querySelectorAll('td')[index].innerHTML;

    ...
});

它适用于内容为字符串而不是数字或其他类型（如日期）的单元格。转到下一部分，看看我们如何支持这些案例。

支持其他类型

我们为每个标题添加一个自定义属性以指示其单元格的类型：

<thead>
    <tr>
        <th data-type="number">No.</th>
        <th>First name</th>
        <th>Last name</th>
    </tr>
</thead>

例如，编号列将具有一个data-type="number"属性。如果缺少该属性，则单元格的内容类型为字符串。我们需要一个函数将单元格的内容从字符串转换为另一种类型：

// Transform the content of given cell in given column
const transform = function (index, content) {
    // Get the data type of column
    const type = headers[index].getAttribute('data-type');
    switch (type) {
        case 'number':
            return parseFloat(content);
        case 'string':
        default:
            return content;
    }
};

示例代码演示了number和string列，但您可以自由支持更多类型，例如日期。

现在我们sortColumn稍微改进一下功能以支持自定义内容类型。我们不比较原始内容，而是比较基于内容类型转换的值：

newRows.sort(function (rowA, rowB) {
    const cellA = rowA.querySelectorAll('td')[index].innerHTML;
    const cellB = rowB.querySelectorAll('td')[index].innerHTML;

    // Transform the content of cells
    const a = transform(index, cellA);
    const b = transform(index, cellB);

    // And compare them
    switch (true) {
        case a > b:
            return 1;
        case a < b:
            return -1;
        case a === b:
            return 0;
    }
});

支持双向

目前，单击标题会对所有行进行排序。如果用户再次单击标题，我们应该反转方向。为此，我们准备了一个变量来管理所有标题的排序方向：

// Track sort directions
const directions = Array.from(headers).map(function (header) {
    return '';
});

directions是一个数组，其中每个项目可以是asc或desc指示关联列中的排序方向。该sortColumn()函数现在涉及更多逻辑来根据当前方向比较两行：

const sortColumn = function(index) {
    // Get the current direction
    const direction = directions[index] || 'asc';

    // A factor based on the direction
    const multiplier = (direction === 'asc') ? 1 : -1;

    ...

    newRows.sort(function(rowA, rowB) {
        const cellA = rowA.querySelectorAll('td')[index].innerHTML;
        const cellB = rowB.querySelectorAll('td')[index].innerHTML;

        const a = transform(index, cellA);
        const b = transform(index, cellB);

        switch (true) {
            case a > b: return 1 * multiplier;
            case a < b: return -1 * multiplier;
            case a === b: return 0;
        }
    });

    ...

    // Reverse the direction
    directions[index] = direction === 'asc' ? 'desc' : 'asc';

    ...
};