在html表格中使用javascript umlaute(ä;、ö;、ü;)对表格进行排序
我有一个html表,由一个mysql查询填充,最初正确排序。现在,我发现可以通过单击表标题对内容进行排序。 这很好,但是: 当我通过单击表格标题列进行排序时,所有内容都以“Umlaute”(ä,ö,ü,Ä,Ö,Ü)开头,在表格的开头(DESC)或结尾(ASC)。 在询问之前,我试着做了我的家庭作业,似乎有可能使用LocalCompare,但我无法在代码中插入此方法(我几乎完成了php课程,很快就开始使用JavaScript,无论如何,如果代码可以与Umlaute一起工作,那就太好了) 下面是JavaScript:在html表格中使用javascript umlaute(ä;、ö;、ü;)对表格进行排序,javascript,Javascript,我有一个html表,由一个mysql查询填充,最初正确排序。现在,我发现可以通过单击表标题对内容进行排序。 这很好,但是: 当我通过单击表格标题列进行排序时,所有内容都以“Umlaute”(ä,ö,ü,Ä,Ö,Ü)开头,在表格的开头(DESC)或结尾(ASC)。 在询问之前,我试着做了我的家庭作业,似乎有可能使用LocalCompare,但我无法在代码中插入此方法(我几乎完成了php课程,很快就开始使用JavaScript,无论如何,如果代码可以与Umlaute一起工作,那就太好了) 下面是Ja
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);
});
});
你需要采取行动
要正确排序数字,您可以提前检查值并使用
return dirModifier * (
Number.isFinite(aColText) && Number.isFinite(bColText)
? (aColText - bColText)
: aColText.localeCompare(bColText)
);
return dirModifier * (
Number.isFinite(aColText) && Number.isFinite(bColText)
? (aColText - bColText)
: aColText.localeCompare(bColText)
);