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

2021-09-22 11:05:45 字數 3027 閱讀 8866

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

aria-label="domain: activate to sort column ascending">預設th>

class="sort sortedasc"

role="columnheader"

tabindex="0"

aria-controls="sample-table-2"

rowspan="1"

colspan="1"

aria-label="price: activate to sort column ascending">銷量th>

class="sort sorteddesc"

role="columnheader"

tabindex="0"

aria-controls="sample-table-2"

rowspan="1"

colspan="1"

aria-label="price: activate to sort column ascending">新品th>

class="sort sorted"

role="columnheader"

tabindex="0"

aria-controls="sample-table-2"

rowspan="1"

colspan="1"

aria-label="update: activate to sort column ascending">

class="ace-icon fa fa-clock-o bigger-110 hidden-480">

i> **

th>

tr>

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

html改造

class

="sort" data-type

="default" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="domain: activate to sort column ascending">預設

class

="sort 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">銷量

class

="sort 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">新品

class

="sort 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">

class

="ace-icon fa fa-clock-o bigger-110 hidden-480"> **

增加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不好實現的效果,通過背景來彌補。預設 銷量新品 效果有了,剩下的就是通過js邏輯和程式邏輯來實現排序了。html改造 預設 sortedascsorteddescsorted data type sale role columnheader tabindex 0 aria controls s...

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

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

氣泡排序公升序降序

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