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 相关文章推荐
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
浅谈javascript的调试
Jan 28 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 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上传中文文件名乱码问题处理方案
2015/02/03 PHP
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python编写一个优美的下载器
2018/04/15 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python空元组在all中返回结果详解
2020/12/15 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
盛大笔试题
2016/11/05 面试题
园林资料员岗位职责
2013/12/30 职场文书
法人委托书范本
2014/04/04 职场文书
小学五年级学生评语
2014/04/22 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
社区服务活动报告
2015/02/05 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python