(本文適合小白/學渣,適合不想動腦子只想復制黏貼的)

需求: 有一個查詢結果,返回的是表格的形式,點擊表頭任何一列,都能實現升序/降序的UI變換,同時表格內容該列也升序降序排列.支持分頁.

實現步驟:

1.css

.table-sort {display: inline-block;width: 10px;height: 20px;margin-left: 5px;cursor: pointer !important;vertical-align: middle;position: relative }.table-sort i {border: 6px dashed transparent;position: absolute;left: 5px }.table-sort .sort-asc {top: 2px;border-top: none;border-bottom-style: solid;border-bottom-color: #b2b2b2 }.table-sort .sort-asc.cur, .table-sort .sort-asc:hover {border-bottom-color: #fff }.table-sort .sort-desc {bottom: 3px;border-bottom: none;border-top-style: solid;border-top-color: #b2b2b2 }.table-sort .sort-desc.cur, .table-sort .sort-desc:hover {border-top-color: #fff }

2.html部分:

在相應的表頭加上樣式: sortIndex_?? 這個用來標識列,比如一個表格有5個列需要有排序功能,就可以依次設置5個th sortIndex_1 、sortIndex_2 ……

<th class="sortIndex_1">面積 <small>(畝)</small><span class="table-sort"><i class="sort-asc"></i><i class="sort-desc"></i></span> </th> <th class="sortIndex_2">人數 <small>(位)</small><span class="table-sort"><i class="sort-asc"></i><i class="sort-desc"></i></span> </th>

3. html部分,寫在form標簽以內,需要提交給后臺的隱藏表單: orderByIndex- 標識第幾列需要排序; ascOrDesc-標識需要升序還是降序

<script> <input type="hidden" class="form-control" name="orderByIndex" id="orderByIndex" value="${orderByIndex}" /> <input type="hidden" class="form-control" name="ascOrDesc" id="ascOrDesc" value="${ascOrDesc}" /> </script>

4.javaScript部分

<script>$(function () { initSort(2);//有幾個列需要排序,這里數值就寫幾}); </script> <script>var initSort = function(maxColNumberNeedSort){var orderByIndex = $("#orderByIndex").val();var ascOrDesc = $("#ascOrDesc").val();for(var i=1;i<=maxColNumberNeedSort;i++){var indexStr = ".sortIndex_"+i;$(indexStr).find(".table-sort i").each(function() {$(this).removeClass("cur");});$(indexStr).bind("click", {index: i}, changeArrowRefreshData);}if(orderByIndex!=undefined&&ascOrDesc!=undefined){var indexStr = ".sortIndex_"+orderByIndex;if(ascOrDesc==0){//降序$(indexStr).find(".table-sort i").eq(1).addClass("cur");}else{//升序$(indexStr).find(".table-sort i").eq(0).addClass("cur");}}};var changeArrowRefreshData= function(event) {var index = event.data.index;var _this = $(this);if(_this.find(".table-sort i").eq(0).hasClass("cur")){//想要降序排列$("#ascOrDesc").val(0);_this.find(".table-sort i").eq(0).removeClass("cur");_this.find(".table-sort i").eq(1).addClass("cur");}else{$("#ascOrDesc").val(1);_this.find(".table-sort i").eq(1).removeClass("cur");_this.find(".table-sort i").eq(0).addClass("cur");}$("#orderByIndex").val(index);getTableData(1);//在此方法實現你的分頁獲取數據邏輯,刷新表格數據.}; </script>

最終效果圖:第1列,第2列實現了手動排序. (注意,一次操作,只能對一列排序,其它列的排序不會被點亮.)

?

總結

以上是生活随笔為你收集整理的jquery 点击实现升序降序图标切换的全部內容，希望文章能夠幫你解決所遇到的問題。

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