jquery sort a field on table

Recently made a flight ticket system, to order the flight information, so organized a bit, to write down the method of sorting.

First, the structure of table is probably as follows

The last style shown is

First, add a custom attribute on each tr: Data-sort-field-ftime, the corresponding value is the departure time minus ":" After a string

This way, when we sort, as long as the value of the data-sort-field-ftime of each TR, after parseint, then bubble sort, you can achieve the effect I want.

Add a custom property to the Sort button: Data-sort-type, one of the 3 values of "None", "ASC", and "desc", to mark the current sort order

You can then add the click event to the Sort button:

　　　　　　　$ (' Div#flightsearchresultbox '). On ("click", "#dc_filter_box_div Ul#sortul A[data-sort-type]", function () {                var $this = $ (this);                var SortID = $this. attr ("id");                var SortType = $ (this). Dvalue ("Sort-type");                    if (sorttype== "None") {SortType = "ASC";                $this. Children ("I"). AddClass ("arrow_up");                    } else if (SortType = = "ASC") {sorttype = "desc";                $this. Children ("I"). Removeclass ("Arrow_up"). AddClass ("Arrow_down");                    } else if (SortType = = "desc") {SortType = "ASC";                $this. Children ("I"). Removeclass ("Arrow_down"). AddClass ("arrow_up");                } $this. Dvalue ("Sort-type", SortType);                                In addition to the sorting criteria that are currently clicked, all other sorting conditions are var $btnSortListWithOutThis = $ ("#dc_filter_box_div Ul#sortul a"). Not ($this);if (SortID = = "Btnsortflighttime") {/* Sort by departure time *///Remove sort style and set sort type to ' none ' $btnSortListWithOutThis. Find ("I"). Removeclass ("Arrow_down"). Removeclass ("Arrow_up"). End (). Dvalue ("Sort-type", "                    None ");                    var $trList = Sorttablebyflighttime (SortType);                Empty the original TR and insert the ordered TR into the DOM of the Table $trList. AppendTo ($ ("#dc_Table > Tbody"). empty ()); } else if (SortID = = "Btnsortprice") {/* sorted by Price */}});

When clicking the Sort button, take its Data-sort-type property to determine the currently selected sort order, if the "none" description is not sorted, then according to ASC to sort, if "ASC", then the order has been sorted, now you need to sort by "desc".

Once you have set the properties, you will then call Sorttablebyflighttime to sort the method.

        Sort//Parameter according to departure time: SORTTYPE=&GT;ASC or desc;            function Sorttablebyflighttime (sorttype) {var $trList = getdctrlist ();//sort-field-ftime Bubble sort for (var i = 0; i < $trList. Length-1, i++) {for (var j = 0; J < $t Rlist.length-1-I;                    J + +) {var value1 = parseint ($trList [j].attributes["Data-sort-field-ftime"].nodevalue);                    var value2 = parseint ($trList [j + 1].attributes["Data-sort-field-ftime"].nodevalue);                        if (SortType = = = "ASC"? value1 > Value2:value1 < value2) {var $temp = $trList [j];                        $trList [j] = null;                        $trList [j] = $trList [j + 1];                        $trList [j + 1] = null;                    $trList [j + 1] = $temp;        }}}//Returns the sorted TR set return $trList;  }

First, the $trList variable gets all the TR under table, is a jquery object =>$ ("#tableid tbody > TR");

Then is the classic bubble sort, according to SortType to determine whether to return the sequential or reverse of the jquery object.

When the jquery object is returned, empty the TR of the original table and insert the JQuery object into the table.

jquery sort a field on table