在 html 表中使用 javascript 變音符號 (ä,ö,ü) 對表進行排序

Question

我有一個 html 表，該表由 mysql 查詢填充，最初排序正確。 現在我發現可以通過單擊表格標題對內容進行排序。 https://codepen.io/dcode-software/pen/zYGOrzK這工作正常，但是：當我通過單擊表格 header 列進行排序時，我的所有內容都以“Umlaute”開頭（ä、ö、ü、Ä、 Ö, Ü) 位於表的開頭 (DESC) 或末尾 (ASC)。 我在問之前嘗試做功課，似乎有可能使用 LocalCompare，但我無法在代碼中插入此方法（我幾乎完成了 php 課程，很快開始 JavaScript，無論如何，如果該代碼將與 Umlaute 一起使用）。

這里是 JavaScript：

function sortTableByColumn(table, column, asc = true)
{
    const dirModifier = asc ? 1 : -1;
    const tBody = table.tBodies[0];
    const rows = Array.from(tBody.querySelectorAll("tr"));

    //Sort each row
    const sortedRows = rows.sort((a, b) =>
        {
            const aColText = a.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
            const bColText = b.querySelector(`td:nth-child(${column + 1})`).textContent.trim();

            return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);


        });

        //remove all existing TRs from the table
        while (tBody.firstChild) 
        {
            tBody.removeChild(tBody.firstChild);
        }

        // re-add the newly sortet rows
        tBody.append(...sortedRows);

        //remember how the column is currently sorted
        table.querySelectorAll("th").forEach(th =>th.classList.remove("th-sort-asc", "th-sort-desc"));
        table.querySelector(`th:nth-child(${column + 1})`).classList.toggle("th-sort-asc", asc);
        table.querySelector(`th:nth-child(${column + 1})`).classList.toggle("th-sort-desc", !asc);
}



document.querySelectorAll(".table-sortable th").forEach(headerCell => {
        headerCell.addEventListener("click", () => {
            const tableElement = headerCell.parentElement.parentElement.parentElement;
            const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
            const currentIsAscending = headerCell.classList.contains("th-sort-asc");

            sortTableByColumn(tableElement, headerIndex, !currentIsAscending);
        });
    });

Answer 1

您需要使用String#localeCompare 。

return aColText.localeCompare(bColText) * dirModifier;

要正確排序數字，您可以提前檢查值並使用

return dirModifier * (
    Number.isFinite(aColText) && Number.isFinite(bColText)
        ? (aColText - bColText)
        : aColText.localeCompare(bColText)
);