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 06 Javascript
理解javascript闭包
Dec 15 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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中类的学习
2008/03/28 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php常用的工具开发整理
2019/09/26 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解Vuex管理登录状态
2017/11/13 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
详解Python函数作用域的LEGB顺序
2016/05/14 Python
使用python实现ANN
2017/12/20 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
单身证明范本
2015/06/15 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
详解Vue的options
2021/05/15 Vue.js
深入理解Vue的数据响应式
2021/05/15 Vue.js
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技