title: Sort a Table based on the option select
body: <p>Good day people,<br>so i have a <strong>jquery mobile</strong> page like that: </p>
  
  <pre><code>&lt;div id="testTableDiv" style="overflow-y: auto; height: 250px"&gt;
  &lt;table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Fruits&lt;/th&gt;
        &lt;th&gt;Numbers&lt;/th&gt;
        &lt;th&gt;Names&lt;/th&gt;
        &lt;th&gt;Countries&lt;/th&gt;
        &lt;th&gt;Animals&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
     .
     .
     content see Fiddle
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;select id="selectId"&gt;
    &lt;option selected disabled&gt;Choose Sort View&lt;/option&gt;
    &lt;option&gt;Names, Animals, Countries&lt;/option&gt;
    &lt;option&gt;Numbers, Fruits, Names&lt;/option&gt;
    &lt;option&gt;Countries, Numbers, Animales&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And based on the Selected option from the select menu i can filter that Table. Take a look at my snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeOrder(table, from, to) {
        var rows = jQuery('tr', table);
        var cols;
        rows.each(function () {
          cols = jQuery(this).children('th, td');
  
          if (to &lt; 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();
      }
    })
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css"&gt;
  
  &lt;div id="testTableDiv" style="overflow-y: auto; height: 250px"&gt;
  &lt;table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Fruits&lt;/th&gt;
        &lt;th&gt;Numbers&lt;/th&gt;
        &lt;th&gt;Names&lt;/th&gt;
        &lt;th&gt;Countries&lt;/th&gt;
        &lt;th&gt;Animals&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Banana&lt;/td&gt;
        &lt;td&gt;2321&lt;/td&gt;
        &lt;td&gt;Kate&lt;/td&gt;
        &lt;td&gt;France&lt;/td&gt;
        &lt;td&gt;Tiger&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Apple&lt;/td&gt;
        &lt;td&gt;819&lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Mexico&lt;/td&gt;
        &lt;td&gt;Dog&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;62&lt;/td&gt;
        &lt;td&gt;Jack&lt;/td&gt;
        &lt;td&gt;Italy&lt;/td&gt;
        &lt;td&gt;Cat&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Banana&lt;/td&gt;
        &lt;td&gt;728&lt;/td&gt;
        &lt;td&gt;James&lt;/td&gt;
        &lt;td&gt;Spain&lt;/td&gt;
        &lt;td&gt;Lion&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Mango&lt;/td&gt;
        &lt;td&gt;11&lt;/td&gt;
        &lt;td&gt;Charlie&lt;/td&gt;
        &lt;td&gt;Croatia&lt;/td&gt;
        &lt;td&gt;Turtle&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cherry&lt;/td&gt;
        &lt;td&gt;42&lt;/td&gt;
        &lt;td&gt;Ben&lt;/td&gt;
        &lt;td&gt;Japan&lt;/td&gt;
        &lt;td&gt;Bee&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;select id="selectId"&gt;
    &lt;option selected disabled&gt;Choose Sort View&lt;/option&gt;
    &lt;option&gt;Names, Animals, Countries&lt;/option&gt;
    &lt;option&gt;Numbers, Fruits, Names&lt;/option&gt;
    &lt;option&gt;Countries, Numbers, Animales&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Now i also want to sort that Table based on the first Column that will be shown.<br>For example: When the user selectes the <code>"Countires, Numbers, Animals"</code> Select option i want to sort the table after the Countries like that:<br>  <br> </p>
  
  <pre><code>Croatia     11     Mango
  France      2321   Banana 
  Italy       62     Orange
  Japan       42     Cherry
  Mexico      819    Apple
  Spain       728    Banana
  </code></pre>
  
  <p>The content gets added dynamically: But i have a array for each column like:<br><code>countryArray[..]&lt;br&gt;numberArray[..]&lt;br&gt;...</code><br> And i can already sort that array with the javascript method <code>.sort()</code><br>
  <br> <strong>Now comes my question how can i apply those sort changes onto my table? The column connection should of course still be available.</strong></p>