最近做一个机票的系统,要对航班信息进行排序,所以整理了一下,把排序的方法写下来。

首先table的结构大概如下

最后显示的样式为

首先在每一个tr上加一个自定义属性:data-sort-field-ftime,对应的值就是起飞时间去掉":"后的一个字符串

这样,我们在排序的时候,只要将每个tr的data-sort-field-ftime的值,parseInt后,然后冒泡排序,就可以实现我要的效果。

给排序按钮加一个自定义属性:data-sort-type,值为"none"、"asc"、"desc"3个值中的一个,用来标记当前的排序顺序

然后,就可以给排序按钮加单击事件了:

       $('div#flightSearchResultBox').on("click", "#dc_filter_box_div ul#sortUL a[data-sort-type]", function () {
var $this = $(this);
var sortID = $this.attr("id");
var sortType = $(this).dValue("sort-type");
if (sortType=="none") {
sortType = "asc";
$this.children("i").addClass("arrow_up");
}
else if (sortType == "asc") {
sortType = "desc";
$this.children("i").removeClass("arrow_up").addClass("arrow_down");
} else if (sortType == "desc") {
sortType = "asc";
$this.children("i").removeClass("arrow_down").addClass("arrow_up");
}
$this.dValue("sort-type", sortType); //除了当前单击的排序条件外,其他所有的排序条件
var $btnSortListWithOutThis = $("#dc_filter_box_div ul#sortUL a").not($this); if (sortID == "btnSortFlightTime") {
/*按起飞时间排序*/
//去掉排序样式并将排序类型设为"none"
$btnSortListWithOutThis.find("i").removeClass("arrow_down").removeClass("arrow_up").end().dValue("sort-type", "none");
var $trList = sortTableByFlightTime(sortType);
//将原来的tr清空,再将排序后的tr插入到table的dom中
$trList.appendTo($("#dc_Table > tbody").empty());
} else if (sortID == "btnSortPrice") {
/*按价格排序*/
}
});

当点击排序按钮时,取其data-sort-type属性判断当前选中的排序顺序,如果为"none"说明没有排序过,那么按照asc来排序,如果为"asc",则说明已经按照顺序排序了,现在需要按照"desc"排序。

设定好属性后,然后就要调用sortTableByFlightTime 这个方法来排序了。

        //根据起飞时间排序
//参数:sortType=>asc或者desc;
function sortTableByFlightTime(sortType) {
var $trList = getDCTrList();//sort-field-ftime
//冒泡排序
for (var i = 0; i < $trList.length - 1; i++) {
for (var j = 0; j < $trList.length - 1 - i; j++) {
var value1 = parseInt($trList[j].attributes["data-sort-field-ftime"].nodeValue);
var value2 = parseInt($trList[j + 1].attributes["data-sort-field-ftime"].nodeValue);
if (sortType === "asc" ? value1 > value2 : value1 < value2) {
var $temp = $trList[j];
$trList[j] = null;
$trList[j] = $trList[j + 1];
$trList[j + 1] = null;
$trList[j + 1] = $temp;
}
}
}
//返回排序后的tr集合
return $trList;
}

首先,$trList变量时获取了Table下所有的tr,是一个jQuery对象=>$("#tableid tbody > tr");

然后就是经典的冒泡排序了,根据sortType来判断返回的是顺序的还是倒序的jQuery对象。

当返回了jQuery对象后,将原有table的tr清空,将此jQuery对象插入到table中即可。

 

jQuery对Table一个字段排序的更多相关文章

  1. 根据某个字段去重 根据另一个字段排序的一个SQL

    背景:一张表 有 name , crt_time , work_sts 三个字段 这张表里存在这样的数据 'a', '2018-12-18 21:37:24', '未''a', '2018-12-19 ...

  2. sql 多个字段排序,头一个字段排序完,再对第二个字段进行排序(以此类推)

    现根据num排序,num数字相同的根据时间进行排序,都是降序DESC SELECT * FROM counts ORDER BY num DESC,create_time DESC

  3. PHP二维数组按某个字段排序

    //准备 二维数组 //按一个字段排序 foreach($rank as $key=>$val){ $dos[$key] = $val['timelength']; } array_multis ...

  4. php 多维数据根据某个或多个字段排序

    实现多维数组的指定多个字段排序 上面的实例讲解了如何实现多维数组指定一个字段排序,但如果要实现指定多个字段来对数组进行排序该如何思考? 多个字段是几个?2个,3个或更多,所以这个不确定的因素需要排除. ...

  5. List多字段排序,orderBy,ThenBy

    List排序问题,orderBy,ThenBy 1.List中一个字段排序 前几天做的项目中,获取的List<T>需要用某个字段来进行排序,困扰了很久.用OrderBy解决了.具体是这样的 ...

  6. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  7. 使用 JQuery 实现将 table 按照列排序

    使用 JQuery 实现将 table 按照列排序 使用 JQuery 实现将 table 按照列排序 代码如下 <!DOCTYPE html> <html> <head ...

  8. List<T>多字段排序的一个通用类

    本文中的方法旨在解决通用的问题,非常注重效率的地方,还应该针对具体的类去写排序方法. 废话不多说,直接上代码 具体使用场景: 要排序的类 1 public class bb 2 { 3 public ...

  9. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

随机推荐

  1. clearfix清除浮动进化史

    我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...

  2. ASP.NET 4.5 和 Visual Studio 2012 中的新功能

    原文地址:http://www.asp.net/aspnet/overview/aspnet-and-visual-studio-2012/whats-new#_Toc318097372

  3. 资源监控工具Spotlight-使用说明

    几年前使用过此工具,发现用于监控远程服务器,非常方面而且快捷.当前再次用于配合压力测试进行资源监控,突然想起来了,以免生疏,在此记录! 1.被监控服务器为Ubuntu server,先在服务器上创建一 ...

  4. 【LeetCode】264. Ugly Number II

    Ugly Number II Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose ...

  5. End of HTML blink tag

    Recently I have read a news which said "Firfox 23 nixes support for outdated blink HTML tag&quo ...

  6. .net微信公众号开发——快速入门

    作者:王先荣 最近在学习微信公众号开发,将学习的成果做成了一个类库,方便重复使用. 现在微信公众号多如牛毛,开发微信的高手可以直接无视这个系列的文章了. 使用该类库的流程及寥寥数行代码得到的结果如下. ...

  7. android 内置视频目录

    在做引导界面的时候有一个视频文件, 把它放在res/raw目录下面. 引用方法 如下: videoView = (VideoView) findViewById(R.id.video_view); v ...

  8. Singleton<T>

    代码如下: public class Singleton<T> where T : class { private static T _instance; private static r ...

  9. javap生成的字节码

    https://www.zhihu.com/question/49470442/answer/135812845http://blog.csdn.net/tzs_1041218129

  10. Oracle数据库入门——物化视图语法

    一.Oracle物化视图语法 create materialized view [view_name]refresh [fast|complete|force][on [commit|demand] ...