Sort the table by clicking on the header

Suppose we want to sort any column in the following table ：

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

Sort the rows

First , We Inquire about All headers , Traverse They are and for each header Attach an event handler Program 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);
    });
});

As mentioned above sortColumn(index) The function sorts all rows by the given column index. So ：

• We can use Array'sort() Method to sort the current row
• then , Delete All current rows
• and additional Sorted rows

// 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);
    });
};

As you can see , Array provides a built-in sort Method , This method accepts a function to compare two items . In our case , The two cells of the column are based on their HTML Content Compare ：

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

    ...
});

It applies when the content is a string rather than a number or other type （ Such as date ） Cells of . Go to the next section , See how we support these cases .

Other types are supported

We add a custom attribute for each heading to indicate the type of cell ：

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

for example , Number The column will have a data-type="number" attribute . If the attribute is missing , Then the content type of the cell is string . We need a function to convert the contents of a cell from a string to another type ：

// 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;
    }
};

The sample code demonstrates number and string Column , But you are free to support more types , For example, date .

Now we sortColumn Slightly improve the functionality to support custom content types . We don't compare the original content , Instead, compare values based on content type conversion ：

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;
    }
});

Support two-way

at present , Clicking the title sorts all rows . If the user clicks the title again , We should reverse the direction . So , We have prepared a variable to manage the sorting direction of all titles ：

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

directions Is an array , Each of these items can be asc or desc Indicates the sort direction in the associated column . The sortColumn() The function now involves more logic to compare two lines according to the current direction ：

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';

    ...
};