最近做一個機票的系統，要對航班信息進行排序，所以整理了一下，把排序的方法寫下來。

首先table的結構大概如下

最后顯示的樣式為

首先在每一個tr上加一個自定義屬性：data-sort-field-ftime，對應的值就是起飛時間去掉":"后的一個字符串

這樣，我們在排序的時候，只要將每個tr的data-sort-field-ftime的值，parseInt后，然后冒泡排序，就可以實現我要的效果。

給排序按鈕加一個自定義屬性：data-sort-type，值為"none"、"asc"、"desc"3個值中的一個，用來標記當前的排序順序

然后，就可以給排序按鈕加單擊事件了：

　　　　　　　$('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);//除了當前單擊的排序條件外，其他所有的排序條件var $btnSortListWithOutThis = $("#dc_filter_box_div ul#sortUL a").not($this);if (sortID == "btnSortFlightTime") {/*按起飛時間排序*///去掉排序樣式并將排序類型設為"none"$btnSortListWithOutThis.find("i").removeClass("arrow_down").removeClass("arrow_up").end().dValue("sort-type", "none");var $trList = sortTableByFlightTime(sortType);//將原來的tr清空，再將排序后的tr插入到table的dom中$trList.appendTo($("#dc_Table > tbody").empty());} else if (sortID == "btnSortPrice") {/*按價格排序*/}});

?

當點擊排序按鈕時，取其data-sort-type屬性判斷當前選中的排序順序，如果為"none"說明沒有排序過，那么按照asc來排序，如果為"asc"，則說明已經按照順序排序了，現在需要按照"desc"排序。

設定好屬性后，然后就要調用sortTableByFlightTime 這個方法來排序了。

//根據起飛時間排序//參數：sortType=>asc或者desc;function sortTableByFlightTime(sortType) { var $trList = getDCTrList();//sort-field-ftime//冒泡排序 for (var i = 0; i < $trList.length - 1; i++) {for (var j = 0; j < $trList.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;}}} //返回排序后的tr集合return $trList;}

?

首先，$trList變量時獲取了Table下所有的tr，是一個jQuery對象=>$("#tableid tbody > tr");

然后就是經典的冒泡排序了，根據sortType來判斷返回的是順序的還是倒序的jQuery對象。

當返回了jQuery對象后，將原有table的tr清空，將此jQuery對象插入到table中即可。

轉載于:https://www.cnblogs.com/chengzi/p/4244529.html

總結

以上是生活随笔為你收集整理的jQuery对Table一个字段排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。