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 相关文章推荐
jquery购物车实时结算特效实现思路
Sep 23 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
javascript实现连续赋值
Aug 10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
Vue的过滤器你真了解吗
Feb 24 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
浅析php变量修饰符static的使用
2013/06/28 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Python 判断奇数偶数的方法
2018/12/20 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
学校介绍信范文
2014/01/14 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang