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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
php5 and xml示例
2006/11/22 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php创建多级目录的方法
2015/03/24 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
对联广告js flash激活
2006/10/19 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python+django实现文件上传
2016/01/17 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
什么叫做SQL注入,如何防止
2016/10/04 面试题
Windows和Linux动态库应用异同
2016/04/17 面试题
综合素质自我评价怎么写
2014/09/14 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Win10 Anaconda安装python-pcl
2022/04/29 Servers