`

table的排序

    博客分类:
  • js
 
阅读更多

<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排序

    以下是一些关于“html中table排序”的关键知识点: 1. **静态排序**: - HTML的`&lt;table&gt;`标签提供了基本的表格结构,如`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体内容)、`&lt;tfoot&gt;`(表尾)等,但它们不具备排序功能。 ...

    实现table排序(以备不时之需)

    本篇将围绕"实现table排序(以备不时之需)"这一主题,详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先,我们看到标签中提到了"源码"和"工具",这意味着我们将探讨一段具体的代码和可能使用的工具...

    js对Table排序经典

    在JavaScript(js)中,对HTML表格(Table)进行排序是一项常见的需求,特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中,应该包含了完整的实现代码,供学习者参考和实践。

    Table排序

    在JavaScript的世界里,Table排序是一种常见的需求,尤其是在网页开发中,我们经常需要对HTML表格的数据进行动态排序,以便用户能够方便地浏览和分析信息。"SortTable.js"这个文件就是为了实现这一功能而设计的,它...

    js代码操作table排序功能

    在JavaScript中,对HTML表格(`&lt;table&gt;`)进行排序是一项常见的需求,特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,...

    jQuery插件集之(table排序)各种排序+Demo

    本主题聚焦于jQuery插件中的一个关键功能:table排序。"jQuery插件集之(table排序)各种排序+Demo"提供了一种高效、灵活的方式来组织和操作HTML表格中的数据。 1. **jQuery插件的使用** jQuery插件通常是开发者为了...

    table排序分页

    在网页开发中,"table排序和分页"是常见的数据展示功能,特别是在处理大量结构化数据时。Table,也就是表格,是一种直观、清晰地展示数据的方式。本篇将深入探讨table排序和分页的实现机制及其重要性。 一、Table...

    javascript table排序 2.0 (更新)

    这个技术主要用于提升用户体验,使得用户可以方便地根据表格中的...通过这些更新,JavaScript Table排序2.0不仅提升了用户体验,也提供了更强大、更灵活的功能,使得开发者可以轻松地在项目中集成和定制表格排序功能。

    table排序

    标题“table排序”指的是在表格数据处理时进行的排序操作,可能是通过编程语言实现,也可能是利用工具进行。下面我们将详细探讨这个主题。 首先,表格排序通常是基于一列或多列的值来调整数据的顺序,以便更容易地...

    html table列自定义排序排序

    table table自定义列排序;目前支持数值排序,文本(支持中文)排序; 示例: var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);

    jquery table 排序插件

    本篇文章将深入探讨“jQuery Table Sort”插件,这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先,我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...

    javascript Table排序

    JavaScript表格排序是网页开发中常见的需求,特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `&lt;table&gt;`元素的基本结构。一个表格由`...

    table 排序

    本文将深入探讨“table排序”的相关知识点,包括其原理、实现方式以及在不同场景下的应用。 首先,我们要理解什么是表格排序。在计算机科学中,表格(Table)是一种组织和展示数据的有效方式,而排序则是按照特定的...

    很好用的javascript_table排序包含测试文件

    在这个"很好用的javascript_table排序"示例中,我们可以通过分析源代码来学习如何实现这个功能。虽然这个实现可能并不完美,但它提供了一些基本的技巧和原理,有助于理解JavaScript如何处理表格数据的排序。 首先,...

    JavaScript Table排序

    JavaScript表格排序是一个常见的需求,特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中,我们将深入探讨JavaScript如何实现表格的动态排序。 首先,我们需要理解HTML...

    table 排序!js特效!很强大!简单易学

    在网页开发中,数据展示是不可或缺的一部分,而表格(Table)是常见的数据组织形式。当数据量较大或者需要用户交互时,对表格内容进行排序就显得尤为重要。本篇将深入探讨如何利用JavaScript(js)实现表格数据的...

    table表格排序

    //需要排序的表头,以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = ...

    JavaScript html js Table排序

    程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...

    bootstrap-table.css 表格拖拽排序

    在本主题中,我们关注的是"bootstrap-table.css 表格拖拽排序",这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景,比如任务管理或者项目进度跟踪。 ...

Global site tag (gtag.js) - Google Analytics