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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="
-
Auntion-TableSort国人写的一个javascript表格排序的东西
Auntion-TableSort最新版 修复了一个数字排序的问题.放出下载 07年5月5日 Auntion TableSort 测试交流第一版 (下一版将会存在部分表格相关特效) ----------------------------------------------------------------------------- 作者:Auntion blog:Auntion.blogbus.com e-mail:Auntion@Gmail.com QQ:82874972 --------
-
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
找到函数: function getElementText(config, node) { var text = ""; if (!node) return ""; if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false; if (config.textExtraction == "simple") { if (config.s
-
javascript 表格排序和表头浮动效果(扩展SortTable)
一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"
-
jQuery表格排序组件-tablesorter使用示例
一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <
-
jQuery排序插件tableSorter使用方法
本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下 1.先引两个js <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.tablesorter.min.js"
-
jquery tablesorter.js 支持中文表格排序改进
代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p
-
tablesorter.js表格排序使用方法(支持中文排序)
最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: function sortText(a, b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; function sortTextDesc(a, b) { return ((b < a) ? -1 : ((b > a) ? 1 : 0)); }; 修改后: function
-
Juery解决tablesorter中文排序和字符范围的方法
本文实例讲述了Juery解决tablesorter中文排序和字符范围的方法.分享给大家供大家参考.具体分析如下: tablesorter是jQuery插件中比较优秀的一款表格排序插件,我相信大家都使用过或有所耳闻,我在这里就不过多介绍了,详细信息可以看看官方网站:http://tablesorter.com/docs/(其中的demo做得比较完整). 在使用了tablesorter开发的几个项目中,发现了两种类型的排序存在问题,如下: 第一个问题是无法对中文字符进行排序,这是因为在对字符排序时,
-
jquery.tableSort.js表格排序插件使用方法详解
本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
-
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 { bor
-
jquery拖拽自动排序插件使用方法详解
本文为大家分享了jquery拖拽自动排序插件,供大家参考,具体内容如下 该插件并不是原生js写的,是基于jquery的,想看原生的话,请绕道而行. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javas
-
vue.js实现日历插件使用方法详解
今天要实现的功能就是以下这个功能:vue.js模拟日历插件 好了废话不多说了 直接上代码了 css: *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #app{ width: 1000px; margin: 10px auto; } .calender{ width: 1000px; } .calender table{
-
CountUp.js数字滚动插件使用方法详解
CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
-
基于js对象,操作属性、方法详解
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很
-
对python实现合并两个排序链表的方法详解
输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 1.迭代方法 def Merge(self, pHead1, pHead2): p1, p2 = pHead1, pHead2 if p1 and p2: if p1.val < p2.val: head = p1 p1 = p1.next else: head = p2 p2 = p2.next cur = head elif p1: return p1 else: return p2 while p
-
IDEA下使用MyBatisCodeHelper插件的方法详解
一:IDEA下使用MyBatisCodeHelper插件.(IDEA的版本 2018 2.5亲测可用) 1.1 IDEA安装MyBatisCodeHelper插件. MyBatisCodeHelper插件现在要付费了,有条件可以买激活码激活的,支持正版,这里演示安装硬盘下载的插件的方式来介绍安装. 下载链接: 链接: https://pan.baidu.com/s/1I-XlrPPVAuzsu9_XY0eEUQ 提取码: bqvn ,内含多个版本的.下载解压查看. Mybatis-Plugin
-
highlight.js 代码高亮插件的使用详解
在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j