[英]Sort a Table based on the option select
Good day people, 大家好,
so i have a jquery mobile page like that: 所以我有一个这样的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>
And based on the Selected option from the select menu i can filter that Table. 根据选择菜单中的“已选择”选项,我可以过滤该表。 Take a look at my snippet
看看我的片段
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>
Now i also want to sort that Table based on the first Column that will be shown. 现在我也想根据将要显示的第一列对该表进行排序。
For example: When the user selectes the "Countires, Numbers, Animals"
Select option i want to sort the table after the Countries like that: 例如:当用户选择
"Countires, Numbers, Animals"
选择选项时,我想对像这样的国家/地区后的表格进行排序:
Croatia 11 Mango
France 2321 Banana
Italy 62 Orange
Japan 42 Cherry
Mexico 819 Apple
Spain 728 Banana
The content gets added dynamically: But i have a array for each column like: 内容是动态添加的:但是我为每个列都有一个数组,例如:
countryArray[..]<br>numberArray[..]<br>...
And i can already sort that array with the javascript method .sort()
而且我已经可以使用javascript方法
.sort()
对数组进行排序
Now comes my question how can i apply those sort changes onto my table? 现在是我的问题了,我该如何将这些排序更改应用于表? The column connection should of course still be available.
列连接当然应该仍然可用。
I managed to solve this problem with the answer from Alexander from this question here: 我设法通过亚历山大从以下问题的答案中解决了这个问题:
Sorting multiple arrays at once . 一次排序多个数组 。
What i did was: Since i got the Table content from each column in a array i simply ordered the appropriate array and adjust the others arrays to it. 我所做的是:由于我从数组中的每一列获取表内容,因此我只订购了适当的数组,然后将其他数组调整为该数组。 After that is done i just update my Table using the
innerText
method. 完成之后,我只是使用
innerText
方法更新了Table。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.