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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
PHP在Web开发领域的优势
2006/10/09 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP实现的简单缓存类
2015/07/29 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php无限极分类实现方法分析
2019/07/04 PHP
浅说js变量
2011/05/25 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
全面了解JavaScript的作用域链
2019/04/03 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
初中政治教学反思
2014/01/17 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
协议书范本
2014/04/23 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL