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

JQ表格排序，数字排序相关推荐

antd table 排序如何使用_Antd Table列字符串排序+数字排序
在中后端WEB app开发过程中经常遇到table列排序的问题,Antd table 提供了sorter的接口,我们可以根据各自项目特点拓展即可. 1.Number类型数据排序,官方提供了number ...
python输入数字并排序_「每日一练」巧用Python实现数字排序
原标题:「每日一练」巧用Python实现数字排序数字排序在我们的生产和生活中占着非常大的比重,这种思维和技术可以让一组数据更快更明了的展现在我们的面前,极大的提高了我们的工作效率! 那么,你知道如何 ...
layui表格设置默认排序_layui table对表格数据处理后的排序问题
table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作.在 table模块对表格数据处理后排序可能出现问题,本文就来为大家介绍一下解决这种问题的方法. 使用layui ...
php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作
我们在上网中都能看到很多能够排序的,如大小.时间.价格等现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄 ...
计算机中的表格中怎么排序,如何设置Excel表格的横向排序功能
如何设置Excel表格的横向排序功能腾讯视频/爱奇艺/优酷/外卖充值4折起今天,小编给大家介绍设置Excel表格横向排序功能的方法,希望对大家有所帮助. 具体如下: 1.首先,请大家在自己的电脑 ...
sorttable.js：让你的所有HTML表格都可以排序
虽然网页设计社区逐渐不再使用表格来布置页面结构,但表格确实有一个至关重要的用途,它们的原始用途.它们用于布置表格数据.例如,想象一张员工表. Name 薪水延期开始日期开始日期(美国) 博客,弗 ...
excel字母数字排序_Excel数字不能正确排序或添加
excel字母数字排序 Last week, I heard from someone who was having a problem sorting some numbers in Excel. ...
【表格排序】vue-elementul表格简单实现排序，数组对象排序方法
效果图像这样的,我是用的第一列ks(科室)来排列的代码这种方法是字符串排序: 比如你表格想要第一列按名字排序那么就这样,用大于小于号来排列 this.tableData.sort(functi ...
php 点击表头排序,TP5+ajax实现点击表格表头切换排序，带分页
TP5+ajax实现点击表格表头切换排序,带分页 2018-08-15 14:59:06ThinkPHP php接收页码请求的地址 /** * ajax 无刷新分页 * param $page int ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...

JQ表格排序，数字排序

需求展示

箭头图片

代码展示

JQ表格排序，数字排序相关推荐

最新文章

热门文章