Сортировка таблицы на основе выбора опции

109
10

Добрый день,
поэтому у меня есть мобильная страница jquery:

<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
.
.
content see Fiddle
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>

И на основе выбранного параметра в меню выбора я могу отфильтровать эту таблицу. Взгляните на мой фрагмент

function changeOrder(table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function () {
cols = jQuery(this).children('th, td');

if (to < cols.length)
cols.eq(from).detach().insertBefore(cols.eq(to));
else
cols.eq(from).detach().insertAfter(cols.last());
});
}

$(document).ready(function() {
$('#testTable').data('origin-table', $('#testTable').html()).text();

$("body").on("change", "#selectId", function() {

if ($("#selectId option:selected").text() == "Names, Animals, Countries") {

$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");

changeOrder(myTable,2,0);
changeOrder(myTable,4,1);
changeOrder(myTable,4,2);

$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();

}
if ($("#selectId option:selected").text() == "Numbers, Fruits, Names") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");

changeOrder(myTable,1,0);

$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}

if ($("#selectId option:selected").text() == "Countries, Numbers, Animales") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");

changeOrder(myTable,3,0);
changeOrder(myTable,2,1);
changeOrder(myTable,5,0);

$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">

<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td>2321</td>
<td>Kate</td>
<td>France</td>
<td>Tiger</td>
</tr>
<tr>
<td>Apple</td>
<td>819</td>
<td>John</td>
<td>Mexico</td>
<td>Dog</td>
</tr>
<tr>
<td>Orange</td>
<td>62</td>
<td>Jack</td>
<td>Italy</td>
<td>Cat</td>
</tr>
<tr>
<td>Banana</td>
<td>728</td>
<td>James</td>
<td>Spain</td>
<td>Lion</td>
</tr>
<tr>
<td>Mango</td>
<td>11</td>
<td>Charlie</td>
<td>Croatia</td>
<td>Turtle</td>
</tr>
<tr>
<td>Cherry</td>
<td>42</td>
<td>Ben</td>
<td>Japan</td>
<td>Bee</td>
</tr>
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>

Теперь я также хочу сортировать эту таблицу на основе первого столбца, который будет показан.
Например: Когда пользователь выбирает параметр "Countires, Numbers, Animals" я хочу отсортировать таблицу после следующих стран:

Croatia     11     Mango
France 2321 Banana
Italy 62 Orange
Japan 42 Cherry
Mexico 819 Apple
Spain 728 Banana

Содержимое добавляется динамически: Но у меня есть массив для каждого столбца, например:
countryArray[..]<br>numberArray[..]<br>...
И я уже могу отсортировать этот массив с помощью метода javascript .sort()

Теперь возникает вопрос, как я могу применить эти изменения сортировки к своей таблице? Конечно, соединение с колонкой должно быть доступно.

спросил(а) 2021-01-19T08:52:28+03:00 6 месяцев, 1 неделя назад
1
Решение
110

Мне удалось решить эту проблему с ответом Александра от этого вопроса здесь:
Сортировка сразу нескольких массивов.
Что я сделал: так как я получил содержимое таблицы из каждого столбца в массиве, я просто заказал соответствующий массив и настроил другие массивы. После этого я просто обновляю таблицу, используя метод innerText.

ответил(а) 2021-01-19T08:52:28+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема