<script type="text/javascript">
//转换类型,v为值,dataType为类型
function convert(v,dataType){
switch(dataType){
case "int":
return parseInt(v);
case "float":
return parseFloat(v);
case "date":
return (new Date(Date.parse(v)));
default:
return v.toString();
}
}
//排序函数,index为列号,dataType为数据类型
function myCompare(index,dataType){
if(dataType=="String"){
return function compare(a,b){
var str1=convert(a.cells[index].innerHTML,dataType);
var str2=convert(b.cells[index].innerHTML,dataType);
return str1.localeCompare(str2);
};
}else{
return function compare(a,b){
var str1=convert(a.cells[index].innerHTML,dataType);
var str2=convert(b.cells[index].innerHTML,dataType);
if(str1>str2){
return 1;
}else if(str1<str2){
return -1;
}else{
return 0;
}
};
}
}
//全局变量记录当前排序index;
var currentCol=-1;
//排序
function sortTable(tableID,index,dataType){
var _tab=$("#"+tableID);
var _tbody=_tab.find("tbody")[0];//获取tbody
var _newRows=_tbody.rows;//获取tbody中所有行
var arr=new Array();//用户存放tbody所有行
//通过循环将所有行放进数组
for(var i=0;i<_newRows.length;i++){
arr.push(_newRows[i]);
}
//判断最后一次排序的列是否与现在要进行排序的列相同,如果是就反序排列
if(currentCol==index){
arr.reverse();
}else{
arr.sort(myCompare(index,dataType));
}
//创建文档碎片
var oFragment=document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.background="#00FFFF";
oFragment.appendChild(arr[i]);
}else{
arr[i].style.background="#00FF00";
oFragment.appendChild(arr[i]);
}
}
_tbody.appendChild(oFragment);
currentCol=index;
}
//此处是调用,需要更加完善...
$(function(){
var tableID="sorttable";
$("#sorttable").find("thead").find("tr").find("td").each(function(index,o){
if(index==1){
o.click(sortTable(tableID,index,"String"));
}else{
o.click(sortTable(tableID,index,"float"));
}
});
});
</script>
分享到:
相关推荐
以下是一些关于“html中table排序”的关键知识点: 1. **静态排序**: - HTML的`<table>`标签提供了基本的表格结构,如`<thead>`(表头)、`<tbody>`(主体内容)、`<tfoot>`(表尾)等,但它们不具备排序功能。 ...
本篇将围绕"实现table排序(以备不时之需)"这一主题,详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先,我们看到标签中提到了"源码"和"工具",这意味着我们将探讨一段具体的代码和可能使用的工具...
在JavaScript(js)中,对HTML表格(Table)进行排序是一项常见的需求,特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中,应该包含了完整的实现代码,供学习者参考和实践。
在JavaScript的世界里,Table排序是一种常见的需求,尤其是在网页开发中,我们经常需要对HTML表格的数据进行动态排序,以便用户能够方便地浏览和分析信息。"SortTable.js"这个文件就是为了实现这一功能而设计的,它...
在JavaScript中,对HTML表格(`<table>`)进行排序是一项常见的需求,特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,...
本主题聚焦于jQuery插件中的一个关键功能:table排序。"jQuery插件集之(table排序)各种排序+Demo"提供了一种高效、灵活的方式来组织和操作HTML表格中的数据。 1. **jQuery插件的使用** jQuery插件通常是开发者为了...
在网页开发中,"table排序和分页"是常见的数据展示功能,特别是在处理大量结构化数据时。Table,也就是表格,是一种直观、清晰地展示数据的方式。本篇将深入探讨table排序和分页的实现机制及其重要性。 一、Table...
这个技术主要用于提升用户体验,使得用户可以方便地根据表格中的...通过这些更新,JavaScript Table排序2.0不仅提升了用户体验,也提供了更强大、更灵活的功能,使得开发者可以轻松地在项目中集成和定制表格排序功能。
标题“table排序”指的是在表格数据处理时进行的排序操作,可能是通过编程语言实现,也可能是利用工具进行。下面我们将详细探讨这个主题。 首先,表格排序通常是基于一列或多列的值来调整数据的顺序,以便更容易地...
table table自定义列排序;目前支持数值排序,文本(支持中文)排序; 示例: var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);
本篇文章将深入探讨“jQuery Table Sort”插件,这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先,我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...
JavaScript表格排序是网页开发中常见的需求,特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
本文将深入探讨“table排序”的相关知识点,包括其原理、实现方式以及在不同场景下的应用。 首先,我们要理解什么是表格排序。在计算机科学中,表格(Table)是一种组织和展示数据的有效方式,而排序则是按照特定的...
在这个"很好用的javascript_table排序"示例中,我们可以通过分析源代码来学习如何实现这个功能。虽然这个实现可能并不完美,但它提供了一些基本的技巧和原理,有助于理解JavaScript如何处理表格数据的排序。 首先,...
JavaScript表格排序是一个常见的需求,特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中,我们将深入探讨JavaScript如何实现表格的动态排序。 首先,我们需要理解HTML...
在网页开发中,数据展示是不可或缺的一部分,而表格(Table)是常见的数据组织形式。当数据量较大或者需要用户交互时,对表格内容进行排序就显得尤为重要。本篇将深入探讨如何利用JavaScript(js)实现表格数据的...
//需要排序的表头,以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = ...
程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...
在本主题中,我们关注的是"bootstrap-table.css 表格拖拽排序",这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景,比如任务管理或者项目进度跟踪。 ...