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