jQuery实现的表格前端排序功能示例


Posted in jQuery onSeptember 18, 2017

本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考,具体如下:

表格前端按列排序

依赖jQuery(本例使用jQuery-1.8.2)

1.初始化方法

(function($){
  //插件
  $.extend($,{
    //命名空间
    sortTable:{
      sort:function(tableId,Idx){
        var table = document.getElementById(tableId);
        var tbody = table.tBodies[0];
        var tr = tbody.rows;
        var trValue = new Array();
        for (var i=0; i<tr.length; i++ ) {
          trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中
        }
        if (tbody.sortCol == Idx) {
          trValue.reverse(); //如果该列已经进行排序过了,则直接对其反序排列
        } else {
          trValue.sort(function(tr1, tr2){
            var value1 = tr1.cells[Idx].innerText; //列
            var value2 = tr2.cells[Idx].innerText; //第二列
            value1 = value1.replace("%",""); //把有%的取消掉
            value1=value1.trim(); //去空格
            console.log(typeof(value1));
            if(isNaN(value1)){
              var index1 = value1.indexOf("分");
              var index2 = value2.indexOf("分");
              if(index1>0){
                var num1 =value1.substring(0,index1);
                var num2 =value1.substring(index1+1,value1.length-1);
                var num3 =value2.substring(0,index2);
                var num4 =value2.substring(index2+1,value2.length-1);
                if(parseFloat(num1)>parseFloat(num3)){
                  return 1;
                }
                if(parseFloat(num1)<parseFloat(num3)){
                  return -1;
                }
                if(parseFloat(num1)==parseFloat(num3)){
                  return parseFloat(num2)-parseFloat(num4)
                }
              }else{
                var a = tr1.cells[Idx].textContent;
                var b= tr2.cells[Idx].textContent;
                return a.localeCompare(b);
              }
            }else{
              return parseFloat(value1)-parseFloat(value2);
            }
          });
        }
        var fragment = document.createDocumentFragment(); //新建一个代码片段,用于保存排序后的结果
        //var index = 0;
        var arrtotal =new Array();
        for (var i=0; i<trValue.length; i++ ) {
          var c = trValue[i].cells[0].innerHTML;
          //console.log(c);
          if(c.trim().indexOf("汇总")!=-1){//汇总行总是排在表格最上面
          // index = i;
            arrtotal.push(i);
            }else{
          fragment.appendChild(trValue[i]);
         }
        }
        if(arrtotal.length>0){
          for(var k=arrtotal.length; k<0; k-- ){
             tbody.appendChild(trValue[arrtotal[k]]);
          }
        }
        //tbody.appendChild(trValue[index]);
        tbody.appendChild(fragment); //将排序的结果替换掉之前的值
        tbody.sortCol = Idx;
      }
    }
  });
})(jQuery);

2.页面函数

function desc_change(id,str){
   $("#desc_1").html("日期");
   $("#desc_2").html("ID");
   $("#desc_3").html("类别");
   $("#"+id).html(str);
}
function desc(id,str){
  var htmlstr =$("#"+id).text().trim();
  var c =str;
  if(htmlstr==str){
    c=str+'↓';
    $("#"+id).html(c);
  }else if(htmlstr==str+'↓'){
    c=str+'↑'
    $("#"+id).html(c);
  }else if(htmlstr==str+'↑'){
    c=str+'↓'
    $("#"+id).html(c);
  }
  desc_change(id,c)
}

3.DOM结构

<table id="tableSort">
    <thead>
    <tr>
        <th onclick="$.sortTable.sort('tableSort',0);desc('desc_1','日期')" ><a id="desc_1" >日期</a></th>
        <th onclick="$.sortTable.sort('tableSort',1);desc('desc_2','软件ID')" ><a id="desc_2" >ID</a></th>
      <th onclick="$.sortTable.sort('tableSort',2);desc('desc_x','渠道ID')" ><a id="desc_3" >类别</a></th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>201870601</td>
        <td>汇总</td>
        <td>新闻</td>
     </tr>
    </tbody>
</table>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
React中jquery引用的实现方法
Sep 12 #jQuery
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php显示时间常用方法小结
2015/06/05 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
vue中activated的用法
2021/01/03 Vue.js
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python绘制简单彩虹图
2018/11/19 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
中职生求职信
2014/07/01 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书