最近做项目有个需要做排序的需求,整理记录一下,如有误或可以优化,请指点…
html:
含有sort-btn的th 都是带有筛选功能的表头
<thead>
<tr>
<th width="20%">基金简称</th>
<th width="10%" class="md-hidden">基金代码</th>
<th width="10%" class="md-hidden">净值日期</th>
<th width="10%">单位净值</th>
<th width="10%" class="md-hidden">累计净值</th>
<th width="10%">
<div class="flex-center">
<div class="md-hidden">日涨跌</div>
</div>
</th>
<th width="10%" class="md-hidden ws-years"><span class="sort-btn">近一年收益</span></th>
<th width="10%" class="md-hidden"><span class="sort-btn">成立以来</span></th>
<th width="10%" class="md-hidden">操作</th>
</tr>
</thead>
js:
// 绑定点击事件
$("#audit_table .sort-btn").bind("click", function() {
sortTable($(this),'#audit_table')
});
// 表格筛选方法封装
//tableId 筛选表格id
//sort-down和sort-up是排序箭头方向
function sortTable(_this,tableId) {
var arrData = $(tableId).find('tbody >tr:has(td)').get(),
_index = $(_this).parents('th').index(),
sortOrder = '';
console.log($(_this).parents('th').index());
if($(_this).hasClass("sort-up")||$(_this).hasClass("sort-down")){
}else{
$('.redkylin-pdt-list th span').removeClass("sort-down sort-up");
$(_this).addClass("sort-down");
}
if($(_this).hasClass("sort-up")) {
sortOrder = 'sort-up';
$(_this).removeClass("sort-up").addClass("sort-down");
} else {
sortOrder = 'sort-down';
$(_this).removeClass("sort-down").addClass("sort-up");
}
arrData.sort(function(a, b) {
var v1 = parseFloat($(a).children('td').eq(_index).text()),
v2 = parseFloat($(b).children('td').eq(_index).text());
if(sortOrder && sortOrder=="sort-down") {
return v1-v2;
}else if(sortOrder && sortOrder=="sort-up"){
return v2-v1;
}
});
$.each(arrData, function(index, row) {
$(tableId +' tbody').append(row);
});
}
因篇幅问题不能全部显示,请点此查看更多更全内容