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

css

<style>.sortedASC{ background: url({sh::PUB}img/icon-table-sort-asc.png) no-repeat 80% 5px #eee;}.sorted{ background: url({sh::PUB}img/icon-table-sort.png) no-repeat 80% 9px #eee ;}.sortedDESC{ background: url({sh::PUB}img/icon-table-sort-desc.png) no-repeat 80% 11px #eee;}</style>

html

<tr role="row"><th role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending">默認</th><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><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><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"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> 價格</th></tr>

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

實現功能

html改造

<th 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">默認</th> <th class="sort <if condition='$sale eq 1'>sortedASC<elseif condition='$sale eq -1'/>sortedDESC<else />sorted</if>" data-type="sale" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">銷量</th> <th class="sort <if condition='$new eq 1'>sortedASC<elseif condition='$new eq -1'/>sortedDESC<else />sorted</if>" data-type="new" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">新品</th> <th class="sort <if condition='$price eq 1'>sortedASC<elseif condition='$price eq -1'/>sortedDESC<else />sorted</if>" data-type="price" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Update: activate to sort column ascending"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> 價格 </th>

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

js事件

$('.sort').click(function() {var type = $(this).data('type');var category_id = '{sh:$category_id}';var sort;if ($(this).hasClass('sorted')) { // 降序$(this).removeClass('sorted').addClass('sortedDESC');sort = '-1';}else if ($(this).hasClass('sortedASC')) { // 降序$(this).removeClass('sortedASC').addClass('sortedDESC');sort = '-1';}else if ($(this).hasClass('sortedDESC')) { // 升序$(this).removeClass('sortedDESC').addClass('sortedASC');sort = '1';}if (type =='default') {location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"'))}";} else {location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"','"+type+"'=>'"+sort+"'))}";}});

后臺處理

if ($sale = $this->_request('sale')) {if ($sale == '-1') {$order = '(salecount+fakemembercount) desc';}if ($sale == '1') {$order = '(salecount+fakemembercount) asc';}$this->assign('sale',$sale); }if ($price = $this->_request('price')) {if ($price == '-1') {$order = 'oprice desc';}if ($price == '1') {$order = 'oprice asc';}$this->assign('price',$price); }if ($new = $this->_request('new')) {if ($new == '-1') {$order = 'addtime desc';}if ($new == '1') {$order = 'addtime asc';}$this->assign('new',$new); }

tips:這里是大概的思路，具體需要你們根據實際情況去實現，可以優化成異步加載。

本文轉自TBHacker博客園博客，原文鏈接：http://www.cnblogs.com/jiqing9006/p/5743537.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的排序箭头，升序，降序简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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