jquery点击实现升序降序图标切换

本文实例为大家分享了jquery点击实现升序降序图标切换的具体代码,供大家参考,具体内容如下

需求: 有一个查询结果,返回的是表格的形式,点击表头任何一列,都能实现升序/降序的UI变换,同时表格内容该列也升序降序排列.支持分页.

实现步骤:

1.css

.table-sort {
    display: inline-block;
    width: 10px;
    height: 20px;
    margin-left: 5px;
    cursor: pointer !important;
    vertical-align: middle;
    position: relative
}
 
.table-sort i {
    border: 6px dashed transparent;
    position: absolute;
    left: 5px
}
 
.table-sort .sort-asc {
    top: 2px;
    border-top: none;
    border-bottom-style: solid;
    border-bottom-color: #b2b2b2
}
 
.table-sort .sort-asc.cur, .table-sort .sort-asc:hover {
    border-bottom-color: #fff
}
 
.table-sort .sort-desc {
    bottom: 3px;
    border-bottom: none;
    border-top-style: solid;
    border-top-color: #b2b2b2
}
 
.table-sort .sort-desc.cur, .table-sort .sort-desc:hover {
    border-top-color: #fff
}

2.html部分:

在相应的表头加上样式: sortIndex_?  这个用来标识列,比如一个表格有5个列需要有排序功能,就可以依次设置5个th sortIndex_1 、sortIndex_2 ……

<th class="sortIndex_1">
    面积 <small>(亩)</small>
    <span class="table-sort">
         <i class="sort-asc"></i>
         <i class="sort-desc"></i>
    </span>
</th>
<th class="sortIndex_2">
    人数 <small>(位)</small>
    <span class="table-sort">
         <i class="sort-asc"></i>
         <i class="sort-desc"></i>
    </span>
</th>

3. html部分,写在form标签以内,需要提交给后台的隐藏表单: orderByIndex- 标识第几列需要排序; ascOrDesc-标识需要升序还是降序

<script>
<input type="hidden" class="form-control" name="orderByIndex" id="orderByIndex" value="${orderByIndex}" />
<input type="hidden" class="form-control" name="ascOrDesc" id="ascOrDesc" value="${ascOrDesc}" />
</script>

4.javaScript部分

<script>
    $(function () {        
        initSort(2);//有几个列需要排序,这里数值就写几
    });
</script>
<script>
 
    var initSort = function(maxColNumberNeedSort){
        var orderByIndex = $("#orderByIndex").val();
        var ascOrDesc = $("#ascOrDesc").val();
 
        for(var i=1;i<=maxColNumberNeedSort;i++){
            var indexStr = ".sortIndex_"+i;
            $(indexStr).find(".table-sort i").each(function() {
                $(this).removeClass("cur");
            });
            $(indexStr).bind("click", {index: i}, changeArrowRefreshData);
        }
 
        if(orderByIndex!=undefined&&ascOrDesc!=undefined){
            var indexStr = ".sortIndex_"+orderByIndex;
            if(ascOrDesc==0){//降序
                $(indexStr).find(".table-sort i").eq(1).addClass("cur");
            }else{//升序
                $(indexStr).find(".table-sort i").eq(0).addClass("cur");
            }
        }
    };
    var changeArrowRefreshData= function(event) {
        var index = event.data.index;
        var _this = $(this);
        if(_this.find(".table-sort i").eq(0).hasClass("cur")){//想要降序排列
            $("#ascOrDesc").val(0);
            _this.find(".table-sort i").eq(0).removeClass("cur");
            _this.find(".table-sort i").eq(1).addClass("cur");
        }else{
            $("#ascOrDesc").val(1);
            _this.find(".table-sort i").eq(1).removeClass("cur");
            _this.find(".table-sort i").eq(0).addClass("cur");
        }
        $("#orderByIndex").val(index);
        getTableData(1);//在此方法实现你的分页获取数据逻辑,刷新表格数据.
    };
</script>

最终效果图:第1列,第2列实现了手动排序. (注意,一次操作,只能对一列排序,其它列的排序不会被点亮.)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery简单实现对数组去重及排序操作实例

    本文实例讲述了jQuery简单实现对数组去重及排序操作.分享给大家供大家参考,具体如下: 1. 去重: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQ去重</title> </head> <body> <script src="jquery-1.7.2.min

  • jquery中的sortable排序之后的保存状态的解决方法

    当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js

  • jQuery EasyUI学习教程之datagrid点击列表头排序

    这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q

  • jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码 代码如下: $.ajax({ type

  • jQuery实现条件搜索查询、实时取值及升降序排序的方法分析

    本文实例讲述了jQuery实现条件搜索查询.实时取值及升降序排序的方法.分享给大家供大家参考,具体如下: 一.鼠标点击获取搜索条件中的被选中的值 创建方法  getAttrValue() 方法,每次的 .click 都要调用  function  getAttrValue(){} 例如,把选中的值给到属性 data-value .只需要每次点击,获取 li.active 的子集  a 的 .attr("data-value")即可 eg: var pubTime = $(getArr[

  • 简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • jQuery实现使用sort方法对json数据排序的方法

    本文实例讲述了jQuery实现使用sort方法对json数据排序的方法.分享给大家供大家参考,具体如下: 如何对后台返回过来的json数据按照数据中的某一项进行排序呢. 首先看一下排序前的json数据: { "result":[ { "cid":1, "name":"aaa", "price":1000 },{ "cid":2, "name":"bbb&qu

  • 基于jquery的表格排序

    很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的. 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件. 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,

  • jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

  • jQuery利用sort对DOM元素进行排序操作

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看. 话题 我们首先看看在w3c中js的sort方法. <script type="text/java

随机推荐