Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think the simpliest solution would be to use the jQuery library and a sort plugin. The sort plugin can be found here: <a href="http://james.padolsey.com/javascript/sorting-elements-with-jquery/" rel="nofollow">http://james.padolsey.com/javascript/sorting-elements-with-jquery/</a></p> <p>You can ask me question if something is wrong with the following code or if you don't understand some parts.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="./js/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./js/jqplugin/sort.js"&gt;&lt;/script&gt; &lt;script&gt; $(function() { $("button").click(function() { // Get the option "opt" which is in the attribute "rel" of the button clicked: // 1 - Sort by trip type // 2 - Sort by price // 3 - Sort by refundable status // 4 - Sort by airline code // 5 - Sort by airline full name var opt = parseInt($(this).attr("rel")); var my_button = $(this); $('#main .fr').sort(function(a, b) { // The inputs "a" and "b" are 2 div lines of class "fr". // We will compare these for sorting // Get the information of "a" and "b", stored in their ID attribute var infoA = $(a).attr("id").split("_"); var infoB = $(b).attr("id").split("_"); var nameA = null; var nameB = null; nameA = infoA[opt]; nameB = infoB[opt]; var output = null; if($(my_button).hasClass("desc")) return nameB.toUpperCase() &gt; nameA.toUpperCase() ? 1 : -1; else return nameA.toUpperCase() &gt; nameB.toUpperCase() ? 1 : -1; }); if($(this).hasClass("desc")) $(my_button).removeClass("desc") else $(this).addClass("desc") }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;div class="fr" id="FlightResult_2_142897_Y_AI_Air-India"&gt;1 - FlightResult_2_142897_Y_AI_Air-India&lt;/div&gt; &lt;div class="fr" id="FlightResult_1_122893_Y_AA_American-Airlines"&gt;2 - FlightResult_1_122893_Y_AA_American-Airlines&lt;/div&gt; &lt;div class="fr" id="FlightResult_2_162891_N_S2_Air-Sahara"&gt;3 - FlightResult_2_162891_N_S2_Air-Sahara&lt;/div&gt; &lt;div class="fr" id="FlightResult_1_152894_Y_9W_jJet-Airways"&gt;4 - FlightResult_1_152894_Y_9W_jJet-Airways&lt;/div&gt; &lt;div class="fr" id="FlightResult_2_172895_N_AI_Air-India"&gt;5 - FlightResult_2_172895_N_AI_Air-India&lt;/div&gt; &lt;div class="fr" id="FlightResult_1_192898_Y_RA_Nepal-Airlines"&gt;6 - FlightResult_1_192898_Y_RA_Nepal-Airlines&lt;/div&gt; &lt;/div&gt; &lt;button id="sort_trip_type" rel="1"&gt;Sort By Trip Type&lt;/button&gt; &lt;button id="sort_price" rel="2"&gt;Sort By Price&lt;/button&gt; &lt;button id="sort_refund_status" rel="3"&gt;Sort By Refundable Status&lt;/button&gt; &lt;button id="sort_air_code" rel="4"&gt;Sort By Airlines Code&lt;/button&gt; &lt;button id="sort_air_name" rel="5"&gt;Sort By Airlines Full Name&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload