英文:
How to add sorting symbols in my HTML table?
问题
You can add sorting symbols to your table header by modifying your HTML and JavaScript code as follows:
- In your HTML, you can add placeholders for sorting symbols in your table header cells (th). For example, you can use some Unicode characters like ▲ for ascending and ▼ for descending.
<th onclick="onColumnHeaderClicked(event)" scope="col">Klant ▲</th>
<th scope="col">Adres</th>
<th onclick="onColumnHeaderClicked(event)" scope="col"># panelen ▼</th>
- Modify your
onColumnHeaderClickedfunction to update the sorting symbols based on the sorting direction (ascending or descending). You can use JavaScript to change the text content of the clicked header cell accordingly.
Here's a modified version of your function:
function onColumnHeaderClicked(ev) {
const th = ev.currentTarget;
const table = th.closest('table');
const thIndex = Array.from(th.parentElement.children).indexOf(th);
const ascending = !('sort' in th.dataset) || th.dataset.sort != 'asc';
// Remove sorting symbols from all header cells
const allTh = table.querySelectorAll(':scope > thead > tr > th');
for (let th2 of allTh) {
th2.textContent = th2.textContent.replace(' ▲', '').replace(' ▼', '');
delete th2.dataset['sort'];
}
// Add sorting symbols to the clicked header cell
th.textContent = th.textContent + (ascending ? ' ▲' : ' ▼');
th.dataset['sort'] = ascending ? 'asc' : 'desc';
sortTableRowsByColumn(table, thIndex, ascending);
}
With these changes, your table header cells will display sorting symbols (▲ for ascending and ▼ for descending) when clicked, providing a visual indication of the sorting direction.
英文:
I am trying to add sorting symbols to my HTML table.
Below is my Javascript code.
function sortTableRowsByColumn( table, columnIndex, ascending ) {
const rows = Array.from( table.querySelectorAll( ':scope > tbody > tr' ) );
rows.sort( ( x, y ) => {
const xValue = x.cells[columnIndex].textContent;
const yValue = y.cells[columnIndex].textContent;
const xNum = parseFloat( xValue );
const yNum = parseFloat( yValue );
return ascending ? ( xNum - yNum ) : ( yNum - xNum );
} );
for( let row of rows ) {
table.tBodies[0].appendChild( row );
}
}
function onColumnHeaderClicked( ev ) {
const th = ev.currentTarget;
const table = th.closest( 'table' );
const thIndex = Array.from( th.parentElement.children ).indexOf( th );
const ascending = !( 'sort' in th.dataset ) || th.dataset.sort != 'asc';
sortTableRowsByColumn( table, thIndex, ascending );
const allTh = table.querySelectorAll( ':scope > thead > tr > th' );
for( let th2 of allTh ) {
delete th2.dataset['sort'];
}
th.dataset['sort'] = ascending ? 'asc' : 'desc';
}
Here is my html for table.
<table id="table" class="table table-striped table-bordered table-sm" style="font-size: 50%;">
<thead>
<tr>
<th onclick="onColumnHeaderClicked(event)" scope="col">Klant </th>
<th scope="col">Adres</th>
<th onclick="onColumnHeaderClicked(event)" scope="col"># panelen</th>
</tr>
</thead>
My sorting works completely fine. However, to make it more intuitive, i want to add sorting symbols to my header. Can some one suggest a way to do it?
答案1
得分: 1
以下是翻译好的部分：
如评论中建议的，您可以使用图标和字体。还可以使用UTF-8字符集来添加字符到您的列标题。以下两个对此很有用：
▴，将显示为 ▴▾，将显示为 ▾
根据列是否未排序、升序排序或降序排序，您可以显示以下三种变体之一：
<tr>客户 ▴▾</tr>，将显示为 客户 ▴▾<tr>客户 ▴</tr>，将显示为 客户 ▴<tr>客户 ▾</tr>，将显示为 客户 ▾
英文:
As suggested in the comments you can use icons and fonts. It is also possible to use the UTF-8 character set to add a character to your column heading. The following two are useful for this purpose:
&#x25b4;which will display as ▴&#x25be;which will display as ▾
Depending on whether the column is unsorted, sorted ascending or sorted descending you display one of the following three variants:
<tr>Klant &#x25b4;&#x25be;</tr>which will look like Klant ▴▾<tr>Klant &#x25b4</tr>which will look like Klant ▴<tr>Klant &#x25be;</tr>which will look like Klant ▾
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论