function ieOrFireFox(ob)
{
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
//排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType) {
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
//将将得到的列放入数组,备用
for (var i=0; i < colRows.length; i++) {
aTrs[i] = colRows[i];
}
//判断上一次排列的列和现在需要排列的是否同一个。
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列,使用数组的sort方法,传进排序函数
aTrs.sort(compareEle(iCol, dataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
//记录最后一次排序的列索引
table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch(dataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
//排序函数,iCol表示列索引,dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="D:/IDE/sortable.js" type="text/javascript"></script>
</HEAD>
<BODY>
<p>Sortable demo:</p>
<table border="1" id="tableId">
<thead>
<tr>
<th onclick="sortAble('tableId', 0)"
style="cursor:pointer">name</th>
<th onclick="sortAble('tableId', 1, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="sortAble('tableId', 2, 'int')"
style="cursor:pointer">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ozone</td>
<td>01/12/1982</td>
<td>25</td>
</tr>
<tr>
<td>OnlyBlue3</td>
<td>10/24/1983</td>
<td>23</td>
</tr>
<tr>
<td>Momo</td>
<td>10/14/1999</td>
<td>8</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
分享到:
相关推荐
只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
页面数据用js导出excel,在IE可以用new 一个ActiveXObject("Excel.Application" )对象来处理,但是需要IE启动activeX,不然运行不了,而且只能在IE里才能运行,不能兼容其他浏览器。所以要在web前端把table生成excel...
解压出来运行samplecode.html就可看到效果,要...step3:给要排序的table加上id="xxx" step4:定义排序列的数据类型 <script type="text/javascript"> initTableWidget('xxx',0,0,Array('S','S','S',0),false); </script>
第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); /...
web开发js实现的表格排序功能,web开发js实现的表格排序功能,web开发js实现的表格排序功能
除了上面的几个,插件还有,Plugin Options(插件选项)、About the plugin(关于插件这些内容),都不是非常的重要,这款插件可以包含任何类型的数据和JavaScript库,它还具有扩展功能,如分页、排序、过滤等,...
后端使用js+express,读取csv文件存储到内存,前端需要那一段的数据,后端就给前端那一页的数据。非常适合前端新手。同时分为两个文件serverImage和clientImage,其中包含项目源码,一些配置文件,以及后端需要处理的...
这是一个ant的虚拟表格,用于解决大数据渲染时页面卡顿的问题,本组件是对ant.desigin中Table组件进行一层封装,属性完全与原组件表保持一致的,可以让你实例中处理渲染1000万条数据,页面也非常流畅。 设计说明 ...
首先我使用的element-ui中的el-table,文档中提供span-method方法可以实现合并行或列,大家不熟悉的可以去看看element文档地址,但是文档提供的例子很简单,不能满足复杂的页面,所以需要处理一下数据。...
#一张桌子 建立在 Backbone.js 上的快速、交互式 Javascript 表格组件。 查看的项目页面,获取完整的 API 文档和示例以帮助您入门 ####特征 快速高效- 在表格滚动时添加和删除行,即使对于非常大的数据集,a...
除了上面的几个,插件还有,Plugin Options(插件选项)、About the plugin(关于插件这些内容),都不是非常的重要,这款插件可以包含任何类型的数据和JavaScript库,它还具有扩展功能,如分页、排序、过滤等,...
分页数据(服务器/客户端) 依栏位筛选排序栏仅显示所需的列自定义单元格渲染文件(将组件依赖项更新为最新版本)要求Vue.js ^ 2.6 + composition-api 它不需要任何CSS框架安装npm install vueye-table -...
欢迎大家提出指正###功能远程/本地请求数据排序搜索行/列渲染分页(非完全开发)###已知问题分页组件只做了简单实现,没有做首页和尾页以及页数较多时的处理如果排序的2行数据相同,可能会出现不同的排序结果###使用...
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...
可排序和过滤的表要测试应用:这是一个基于React的简单可排序和过滤的表。 Table能够通过单击字段对数据进行排序,过滤输入数据并使用分页将数据划分为离散页面。React :laptop:React钩 :laptop:
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
table : BaseJs.$("tab"), // 从第几行第几列开始可编辑 start : [2, 1], // 到哪一行哪一列结束编辑 不写默认所有,写一个参数代表列,行不限 end : [], // 新增操作 addAction : { // (button)执行...
将根据React计数对问题进行优先排序。 is:issue is:open sort:reactions-+1-desc过滤器将被使用。 先决条件 自材料表v1.36.1起,最低React版本的材料表支持为^16.8.5 。 这是由于将用于使用钩子的拖放功能。