Sort a Table based on the option select

Question

Good day people,
so i have a jquery mobile page like that:

<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:

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()

Now comes my question how can i apply those sort changes onto my table? The column connection should of course still be available.

Then no sort. Once the DOM is created, you need to extract the data from the table using jquery, sort them, and rewrite the DOM table element. — cpugourou, Sep 20 '16 at 10:32
This is very bad code. Extract your table with a loop into an array containing the elements. Sort them and rewrite the dom. 5 codes lines at most — cpugourou, Sep 20 '16 at 10:40
Javasscript is all about elements. If you dont learn to use it = no future. — cpugourou, Sep 20 '16 at 10:42

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

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.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 23 '16 at 08:25

TheWandererr

514
1
8
34

Sort a Table based on the option select

1 Answers1