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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
js 省地市级联选择
Feb 07 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
微信小程序block的使用教程
Apr 01 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
浅谈js数组和splice的用法
2016/12/04 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
解除劳动合同证明书模板
2014/11/20 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
教学督导岗位职责
2015/04/10 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android