欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

TableSort.js表格排序插件使用方法详解

程序员文章站 2023-01-15 13:58:20
本文实例为大家分享了tablesort.js表格排序的具体代码,供大家参考,具体内容如下

本文实例为大家分享了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> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。