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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP入门速成(2)
2006/10/09 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Scrapy的简单使用教程
2017/10/24 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python Tkinter版学生管理系统
2019/02/20 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
活动倡议书范文
2014/05/13 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
给领导敬酒词
2015/08/12 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS