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

js table sort

    博客分类：
  • js
JavaScript浏览器ServletHTML 
阅读更多

之前一直在考虑queue的单一message的删除问题，发现根据“first come first out”的机制，删除操作结束后，queue里的消息排列顺序已经被打乱了。本想利用servlet来解决排序问题，但发现只能以单一的升降顺序排列，而且代码和服务器端资源也开销不少（迷：根本就是你懒得写）。后来突然想到，这种排序问题好像可以用javascript解决，完全可以把部分计算转移到client端，无需再占用server端的资源。

再次请教万能的GG大神～找到如下两个程序

程序一：  sorttable: Make all your tables sortable

链接：http://www.kryogenix.org/code/browser/sorttable/

 

程序二： Standardista Table Sorting (A client-side JavaScript Table Sort module)

链接： http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting

 

用法都一样，先在自己的html网页的<head>部分指定需要插入的javascript library，指定格式为： 

<script type='text/javascript' src='sorttable.js'></script>

接着在需要进行排序的table里设置class

table class="sortable" 
具体设置过程和适用的浏览器见链接网页。
分享到：
| CSS 学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现漂亮的table表格

    本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先，我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...

    原生js table表格自动排序效果

    `sort.js`是实现排序功能的JavaScript代码。这里的关键在于监听表格的`click`事件，特别是对表头单元格（`&lt;th&gt;`）的点击。当用户点击某一列时，JavaScript会捕获该事件，获取到被点击的列的索引，并执行排序算法。 ...

    JS操作table大全

    在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...

    原生js table表格插件制作表格自动排序效果

    这里涉及到数组的排序算法，例如冒泡排序、选择排序或快速排序，但考虑到性能，可以使用JavaScript内置的`sort`方法，它接受一个比较函数作为参数。 比较函数应根据表格数据类型进行设计。如果数据是数字，可以直接...

    sort.js实现table表单点击列名排序

    table列点击排序功能JS实现，表单table显示的时候，点击表单列名实现升序以及降序功能！

    js代码操作table排序功能

    在JavaScript中，我们可以使用`Array.prototype.sort()`方法对数组进行排序。这个方法接受一个比较函数作为参数，用于决定元素的顺序。例如，我们可以创建一个简单的升序排序函数： ```javascript function ...

    table拖拽js

    总结起来，"table拖拽js"是BootstrapTable的一个强大特性，通过引入`bootstrap-table-reorder-rows.js`扩展和设置相关数据属性，我们可以轻松地实现用户友好的拖放排序功能。结合适当的事件监听和后端处理，可以创建...

    JavaScript Table排序

    这里可以使用JavaScript的数组方法`sort()`，它接受一个比较函数作为参数。比较函数接收两个元素作为参数，返回值决定了它们的相对顺序。 例如，如果我们要根据年龄排序，可以编写如下JavaScript代码： ```...

    js 实现 table 行排序 TableOrder.rar

    本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的详细说明： 1. **HTML表格结构**： 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示表格行，`&lt;th&gt;`表示...

    javascript Table排序

    rows.sort(sortFunction); var tbody = table.querySelector('tbody'); tbody.innerHTML = ''; rows.forEach(row =&gt; tbody.appendChild(row)); ``` 4. **事件监听**：为了实现用户点击表头进行排序的功能，...

    js实现点击table表头字段带箭头标示

    这涉及到JavaScript数组的`sort`方法，通常需要一个比较函数来确定元素的相对顺序。 6. **更新UI**: 更新表格的DOM结构，反映新的排序顺序。同时，根据排序方向更改表头的箭头图标，可以使用CSS伪类如`:before`和`:...

    css+js+table效果代码

    在网页设计中，表格（Table）常用于数据展示，而CSS（层叠样式表）和JavaScript（JS）则能为表格增添动态效果和用户交互性。 **CSS（层叠样式表）**在网页设计中起到美化和布局的作用。对于表格，CSS可以用来改变...

    js 对页面table数据排序

    在网页开发中，JavaScript（简称JS）是一种必不可少的脚本语言，它被广泛用于实现页面交互和动态功能。本文将详细讲解如何使用JS对页面上的HTML表格数据进行排序，以便用户点击表头时能直接触发排序操作。 首先，...

    html table表单排序bydarkst_sort.js

    &lt;script language="javascript" src="bydarkst_sort.js"&gt; Auteror: BYDARKST mailto: bydarkst@163.com 始终坚持用最简单的思路，最简洁的写法，打造效率更高，易用性更高的软件！ **************************...

    bootstrap-table插件

    Bootstrap Table的使用非常直观，只需在HTML中引入必要的CSS和JS文件，然后在`&lt;table&gt;`标签上添加`data-toggle="table"`属性即可初始化。表格的列可以通过`&lt;th&gt;`标签中的`data-field`属性定义，该属性用于指定数据...

    0301drag-sort-table_javascript_veeqi

    标题“0301drag-sort-table_javascript_veeqi”暗示了一个关于JavaScript实现的拖动排序表格的项目。这个项目可能包含一个可交互的表格，用户可以通过拖动行来改变表格中的数据顺序。这里，我们将深入探讨JavaScript...

    js 实现 table 行排序

    === SortTableTool.js 实现table行排序. === 源码中有详细说明.sort_table.html 为示例html. 1.支持的排序数据类型有 Number,String,Date,NoCaseString 2.默认开始为升序,可指定为降序. 3.默认为只排序第一个tbody,...

    Table动态排序-sorttable

    "sorttable.js"是实现这一功能的JavaScript库，它是一个轻量级的工具，用于添加排序功能到任何HTML表格。 首先，让我们深入了解一下`sorttable.js`的工作原理。这个库通过监听表头（thead）中的单元格（th）点击...

    JS组件Bootstrap Table使用方法详解

    bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy &lt;table data-toggle="table"&gt; &lt;thead&gt; ... ...

    jquery table 排序插件

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

Magicbox
Global site tag (gtag.js) - Google Analytics