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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
微信小程序 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python为什么要安装到c盘
2020/07/20 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
关于打架的检讨书
2014/01/17 职场文书
销售经理工作职责
2014/02/03 职场文书
自主招生自荐信指南
2014/02/04 职场文书
小学语文课后反思精选
2014/04/25 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
护理见习报告范文
2014/11/03 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年环保局工作总结
2015/05/22 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL