TableSort.js表格排序插件使用方法详解


Posted in Javascript onFebruary 10, 2017

本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TableSort</title> 
<style type="text/css"> 
table { 
  border-collapse: collapse; 
  width: 300px; 
} 
table caption { 
  border-right: 1px solid #abc; 
  border-left: 1px solid #abc; 
  border-top: 2px solid #000; 
  border-bottom: 2px solid #000; 
  background-color: #afd; 
} 
#sales tr, #sales td { 
  border: 1px solid #abc; 
  text-align: center; 
} 
</style> 
</head> 
<body> 
<table id="sales" summary="summary here"> 
 <caption> 
 Main Title 
 </caption> 
 <col/> 
 <col/> 
 <col/> 
 <thead> 
  <tr> 
   <th class="asc">Col1</th> 
   <th>Col2</th> 
   <th>Col3</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A1</td> 
   <td>S2</td> 
   <td>W3</td> 
  </tr> 
  <tr> 
   <td>B1</td> 
   <td>C2</td> 
   <td>V3</td> 
  </tr> 
  <tr> 
   <td>C1</td> 
   <td>X2</td> 
   <td>K3</td> 
  </tr> 
 </tbody> 
 <!-- tfoot><tr><td cols=3 >other description</td></tr></tfoot --> 
</table> 
<button onclick="fn()">Test</button> 
<script language="javascript"> 
function TableSort(id) { 
  this.tbl = document.getElementById(id); 
  this.lastSortedTh = null; 
  if (this.tbl && this.tbl.nodeName == "TABLE") { 
    var headings = this.tbl.tHead.rows[0].cells; 
    for (var i = 0; headings[i]; i++) { 
      if (headings[i].className.match(/asc|dsc/)) { 
        this.lastSortedTh = headings[i]; 
      } 
    } 
    this.makeSortable(); 
  } 
} 
TableSort.prototype.makeSortable = function() { 
  var headings = this.tbl.tHead.rows[0].cells; 
  for (var i = 0; headings[i]; i++) { 
    headings[i].cIdx = i; 
    var a = document.createElement("a"); 
    a.href = "#"; 
    a.innerHTML = headings[i].innerHTML; 
    a.onclick = function(that) { 
      return function() { 
        that.sortCol(this); 
        return false; 
      } 
    }(this); 
    headings[i].innerHTML = ""; 
    headings[i].appendChild(a); 
  } 
} 
TableSort.prototype.sortCol = function(el) { 
  var rows = this.tbl.rows; 
  var alpha = [], numeric = []; 
  var aIdx = 0, nIdx = 0; 
  var th = el.parentNode; 
  var cellIndex = th.cIdx; 
 
  for (var i = 1; rows[i]; i++) { 
    var cell = rows[i].cells[cellIndex]; 
    var content = cell.textContent ? cell.textContent : cell.innerText; 
    var num = content.replace(/(\$|\,|\s)/g, ""); 
    if (parseFloat(num) == num) { 
      numeric[nIdx++] = { 
        value : Number(num), 
        row : rows[i] 
      } 
    } else { 
      alpha[aIdx++] = { 
        value : content, 
        row : rows[i] 
      } 
    } 
  } 
  function bubbleSort(arr, dir) { 
    var start, end; 
    if (dir === 1) { 
      start = 0; 
      end = arr.length; 
    } else if (dir === -1) { 
      start = arr.length - 1; 
      end = -1; 
    } 
    var unsorted = true; 
    while (unsorted) { 
      unsorted = false; 
      for (var i = start; i != end; i = i + dir) { 
        if (arr[i + dir] && arr[i].value > arr[i + dir].value) { 
          var temp = arr[i]; 
          arr[i] = arr[i + dir]; 
          arr[i + dir] = temp; 
          unsorted = true; 
        } 
      } 
    } 
    return arr; 
  } 
 
  var col = [], top, bottom; 
  if (th.className.match("asc")) { 
    top = bubbleSort(alpha, -1); 
    bottom = bubbleSort(numeric, -1); 
    th.className = th.className.replace(/asc/, "dsc"); 
  } else { 
    top = bubbleSort(numeric, 1); 
    bottom = bubbleSort(alpha, 1); 
    if (th.className.match("dsc")) { 
      th.className = th.className.replace(/dsc/, "asc"); 
    } else { 
      th.className += "asc"; 
    } 
  } 
  if (this.lastSortedTh && th != this.lastSortedTh) { 
    this.lastSortedTh.className = this.lastSortedTh.className.replace( 
        /dsc|asc/g, ""); 
  } 
  this.lastSortedTh = th; 
  col = top.concat(bottom); 
  var tBody = this.tbl.tBodies[0]; 
  for (var i = 0; col[i]; i++) { 
    tBody.appendChild(col[i].row); 
  } 
} 
function fn() { 
 
  var sales = document.getElementById('sales'); 
  var sortTable = new TableSort('sales'); 
} 
</script> 
</body> 
</html>

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

Javascript 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 #Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
PHP strtotime函数详解
2009/12/18 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python动态加载变量示例分享
2014/02/17 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python3实现随机数
2018/06/25 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
班级活动策划书
2014/02/06 职场文书
实习协议书范本
2014/04/22 职场文书
课外科技活动总结
2014/08/27 职场文书
2014年度工作总结报告
2014/12/15 职场文书
英语感谢信范文
2015/01/20 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python