Как запустить сортировку таблицы по клике на кнопку?

Question

[Дима]

Добрый день, уважаемые участники форума. Сейчас использую вот такой код для сортировки столбцов в таблице :

<script>document.addEventListener('DOMContentLoaded', () => {

    const getSort = ({ target }) => {
        const order = (target.dataset.order = -(target.dataset.order || -1));
        const index = [...target.parentNode.cells].indexOf(target);
        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
        const comparator = (index, order) => (a, b) => order * collator.compare(
            a.children[index].innerHTML,
            b.children[index].innerHTML
        );
        
        for(const tBody of target.closest('table').tBodies)
            tBody.append(...[...tBody.rows].sort(comparator(index, order)));

        for(const cell of target.parentNode.cells)
            cell.classList.toggle('sorted', cell === target);
    };
    
    document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));
    
});
</script>

Скрипт работает отлично :
нажал на заголовок столбца и столбец сортировался от большего к меньшему, ещё раз нажал и уже от меньшего к большему.

Сейчас мне нужно рядом с таблицей сделать отдельную кнопку , при нажатии которой происходит сортировка конкретного столбца.

Пример:

<table width="100%" style="font-size:.9em"   class="table_sort">
				<thead class="alert-info">
					<tr class="shapka">
					    <th class="ves" width="10%">Столбец</th>
					    <th class="ves" width="10%">Столбец 2</th>
						<th class="cana" width="32%">Столбец 3 - цена </th>		
					</tr>
.....

И при нажатии на кнопку происходила сортировка столбца 3

Буду очень признателен, если дадите подсказку , как решить этот вопрос :)

Answer 1

[Khalit]

button.addEventListener("click", ()=>getSort({target:загаловок_столбца}) )

Comments

[Дима]

Большое спасибо за интерес к моему вопросу! К сожалению у меня не поулчается настроить сортировку. Я делаю вот так :

document.addEventListener('DOMContentLoaded', () => {

    const getSort = ({ target }) => {
        const order = (target.dataset.order = -(target.dataset.order || -1));
        const index = [...target.parentNode.cells].indexOf(target);
        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
        const comparator = (index, order) => (a, b) => order * collator.compare(
            a.children[index].innerHTML,
            b.children[index].innerHTML
        );
        
        for(const tBody of target.closest('table').tBodies)
            tBody.append(...[...tBody.rows].sort(comparator(index, order)));

        for(const cell of target.parentNode.cells)
            cell.classList.toggle('sorted', cell === target);
            
    };
     
    document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));
    button.addEventListener("click", ()=>getSort({target:Цена}) )
    
});

Но при нажатии кнопку скрипт не срабатывает. Может быть вы сможете подсказать в чём моя ошибка ?

[Khalit]

Там где я написал заголовок_столбца я имел ввиду HTMLElement который можно получить через document.getElementById("price") на который вы кликаете <th id="price">Цена</th>