排序箭頭,公升序,降序簡單實現

2021-09-08 19:00:43 字數 1768 閱讀 4424

css不好實現的效果,通過背景來彌補。

預設

銷量新品

**

效果有了,剩下的就是通過js邏輯和程式邏輯來實現排序了。

html改造

預設

sortedascsorteddescsorted" data-type="sale" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="price: activate to sort column ascending">銷量

sortedascsorteddescsorted" data-type="new" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="price: activate to sort column ascending">新品

sortedascsorteddescsorted" data-type="price" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="update: activate to sort column ascending">

**

增加date-type,統一的class 'sort'。

js事件

$('.sort').click(function() ';

var sort;

if ($(this).hasclass('sorted')) else if ($(this).hasclass('sortedasc')) else if ($(this).hasclass('sorteddesc'))

if (type =='default') ";

} else ";

}});

後台處理

tips:這裡是大概的思路,具體需要你們根據實際情況去實現,可以優化成非同步載入。

排序箭頭,公升序,降序簡單實現

css不好實現的效果,通過背景來彌補。aria label domain activate to sort column ascending 預設th class sort sortedasc role columnheader tabindex 0 aria controls sample tab...

排序箭頭,公升序,降序簡單實現

css不好實現的效果,通過背景來彌補。aria label domain activate to sort column ascending 預設th class sort sortedasc role columnheader tabindex 0 aria controls sample tab...

氣泡排序公升序降序

氣泡排序 時間複雜度 o n2 實 質 把小 大 的元素往前 後 調 氣泡排序演算法的原理如下 比較相鄰的元素。如果第乙個比第二個大,就交換他們兩個。對每一對相鄰元素做同樣的工作,從開始第一對到結尾的最後一對。在這一點,最後的元素應該會是最大的數。針對所有的元素重複以上的步驟,除了最後乙個。持續每次...