`
allovertheword
  • 浏览: 3323 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 排序table

阅读更多
var i = 0;

$(document).ready(myFunction);

function myFunction()
{
	$('<table id="table" width="100" height="100" border="1"></table>')
	.appendTo('body')
	.bind('click',myclick);
	
	$("#sortASC").click(function(){
		
		SortArray.array = $("#table tr");
		
		SortArray.sortAsc(0,$("#table tr").length-1);
		
		$("#table tr").detach();
		
		$.each(SortArray.array,function(){
			$("#table").append(this);
		})
	});
	
	$("#sortDESC").click(function(){
		
		SortArray.array = $("#table tr");
		
		SortArray.sortDesc(0,$("#table tr").length-1);
		
		$("#table tr").detach();
		
		$.each(SortArray.array,function(){
			$("#table").append(this);
		})
	});
}
function myclick(){
	$('<tr id="'+(i++)+'"><td>'+(i)+'</td></tr>')
	.appendTo($(this));
}

var SortArray={
	array:[],
	sortDesc:function(low,high){
		if(low<high){
		var middle = this.getMiddleDESC(low,high);
		this.sortDesc(0,middle -1);
		this.sortDesc(middle +1,high);
		}
	},
	sortAsc: function(low,high){
		if(low<high){
		var middle = this.getMiddleASC(low,high);
		this.sortAsc(0,middle -1);
		this.sortAsc(middle +1,high);
		}
	},
	getMiddleDESC:function(low,high){
		var temp = this.array[low]; 
		while(low<high){
		
			while(low<high && parseInt($(this.array[low]).attr("id")) > parseInt($(this.array[high]).attr("id"))){
				high--;
			}
			this.array[low] = this.array[high];
	
			while(low<high && parseInt($(this.array[low]).attr("id")) <= parseInt($(this.array[low]).attr("id"))){
				low++;
			}
			this.array[high] = this.array[low];
		}
		this.array[low] = temp;
		return low;
	},
	getMiddleASC: function(low,high){
		var temp = this.array[low]; 
		while(low<high){
		
			while(low<high && parseInt($(this.array[low]).attr("id")) < parseInt($(this.array[high]).attr("id"))){
				high--;
			}
			this.array[low] = this.array[high];
	
			while(low<high && parseInt($(this.array[low]).attr("id")) >= parseInt($(this.array[low]).attr("id"))){
				low++;
			}
			this.array[high] = this.array[low];
		}
		this.array[low] = temp;
		return low;
	}
}


<div class="clickme">Click here</div>
	<input id="sortASC" type="button" value="升序" />
	<input id="sortDESC"  type="button" value="降序" />
分享到:
评论

相关推荐

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    jquery实现table的动态排序

    对于"jquery实现table的动态排序"这个主题,我们将会深入探讨如何利用jQuery来实现表格数据的动态排序,以便用户可以按照不同列的值进行升序或降序排列,而无需重新加载页面。 首先,我们需要一个包含数据的HTML...

    jQuery实现的分页排序Table组件

    在网页开发中,数据展示是不可或缺的一部分,而jQuery实现的分页排序Table组件则为开发者提供了高效、灵活的方式来处理大量数据的展示问题。这个组件通常用于动态加载和组织表格数据,使得用户可以轻松浏览和操作...

    jquery table 排序插件

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

    jquery实现table内数据排序,点击即可

    在这个项目中,`jQuery`被用来实现一个功能,即在HTML表格(`table`)中对数据进行排序,用户只需点击表头就能看到排序的效果。这种方式相较于在服务器端进行排序,具有更高的效率,因为数据的处理是在客户端完成的...

    jquery uI TABLE

    《jQuery UI Table:深入解析与应用实践》 jQuery UI Table是一款基于jQuery库的插件,用于创建功能丰富的表格。在Web开发中,表格是展示数据的常见方式,jQuery UI Table通过提供可定制的样式和交互功能,使得网页...

    jQuery实现Table分页跳转

    3. **排序与搜索**:结合jQuery或其他JavaScript库(如Bootstrap DataTables),可以实现分页的同时支持表格的排序和搜索功能。 四、优化与注意事项 - 考虑到用户体验,分页请求应尽可能快速,避免用户等待。 - 为...

    基于Jquery的前台按表头排序table tr th

    本教程将详细讲解如何使用Jquery库实现前端表格(table)按表头(th)进行排序。Jquery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,非常适合用于此类交互功能的实现。 首先,我们需要理解...

    jquery table 表格 排序

    对于压缩包中的"JQuery 简单易用 table排序"文件,它可能包含了实现上述功能的示例代码或者完整的jQuery插件。通过查看和学习这些代码,你可以更好地理解如何在实际项目中应用这些知识。 总的来说,利用jQuery实现...

    jquery table的静态排序

    ### jQuery Table静态排序知识点 #### 一、简介 在网页开发过程中,经常需要对表格数据进行排序处理,以便用户能够更方便地查看和管理数据。jQuery Tablesorter插件为实现这一功能提供了一种简单而有效的方法。...

    JQuery 自定义 Table

    本文将详细讲解如何使用jQuery来自定义Table,以及动态构建Table的相关技术。 首先,让我们理解“自定义Table”的概念。在网页开发中,HTML的`&lt;table&gt;`元素通常用于展示结构化数据,但其样式和功能相对有限。通过...

    JQuery获取table一列值

    ### JQuery 获取 Table 一列值的方法详解 在 Web 开发中,经常需要处理表格数据,尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格(`&lt;table&gt;`)中某一列的所有值。下面将详细介绍...

    Jquery Custom Table

    **jQuery Custom Table** 是一个基于JavaScript库jQuery的自定义表格插件,主要用于满足开发者在不同业务场景下的数据展示需求。这个插件允许用户根据自身业务逻辑进行高度定制,以适应不断变化的用户界面和交互需求...

    jQuery实现table上移下移和置顶

    本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...

    jQuery实现table中的tr上下移动并保持序号不变

    本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...

    jquery 排序, jquery 动态修改列

    本文将深入探讨“jQuery排序”和“jQuery动态修改列”这两个主题,帮助开发者更好地理解和应用jQuery。 首先,让我们来看看“jQuery排序”。在网页开发中,我们经常需要对数据进行排序,例如表格中的行或列表项。...

    jquery 表格 jquery table

    jQuery 表格(jQuery Table)则是利用 jQuery 库来创建、操作和美化表格的一种技术。在本篇文章中,我们将深入探讨如何使用 jQuery 实现功能丰富的表格,包括数据加载、排序、过滤和分页等。 首先,创建一个基本的 ...

    jquery table分页 非常好用

    例如,`jQuery DataTables` 是一个广泛使用的插件,它提供了强大的表格功能,包括分页、排序、搜索等。只需在页面中引入插件的CSS和JS文件,然后对表格应用`dataTable()`方法,就可以轻松实现分页。此外,`bootstrap...

    jquery table ui插件制作css表格隔行变色特效代码

    在实际项目中,`Table UI`插件可能会提供更高级的定制选项,如预定义的主题、分页、排序和过滤等功能。你需要查看具体插件的文档来了解如何结合使用。 总结,实现`jQuery table UI`插件制作的CSS表格隔行变色特效,...

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

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

Global site tag (gtag.js) - Google Analytics