JQ表格排序，数字排序

需求展示

最近做项目有个需要做排序的需求，整理记录一下，如有误或可以优化，请指点…

需求如图，默认不排序，每次排序只以一列排序。

箭头图片

sort-up
sort-icon
sort-down

代码展示

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);
    });
}