Javascript对HTML表格排序-很实用

Javascript实现HTML表格排序，点击表头的标题单元格，即可对该列排序，升序降序切换，数字、文本都可以排序。

先看下面的效果图：

该功能已经封装成了一个Javascript函数，要实现表格排序的功能非常简单，只需：

引入包含该函数的js文件（需要预先引入jQuery）—— 这个不难
在需要排序的表格的标题单元格（th元素）的class属性添加sortable类，如 <th class="sortable">（也可以自定义类名。在调用排序函数时传入该类名即可）。—— 就是添加个样式类，这个也不难
调用sortTable()进行排序 —— 一行代码而已

该函数将：
1. 自动寻找对应的表格table元素，以及排序内容所在的tbody元素
2. 绑定标题单元格的点击事件进行排序，升序降序切换
3. 给标题单元格添加排序图标—— ↓↑↓↑\downarrow\uparrow （依赖于font-awesome 图标库），以及文字提示，鼠标停留时指针变成手型(cursor: pointer)

说明：

排序时，指定单元格中的空格、百分号<script type="math/tex" id="MathJax-Element-6">%</script>、和逗号,会被过滤掉，以支持数值被格式化的情况，如数字123,455.0。

可以支持自定义指定排序列的类名和排序比较函数，调用形式如下：

sortTable(selector,compFunc);
// selector 是用来选定需要排序的单元格所在列，如 .sortable
// compFunc 是用来对单元格比较的函数，compFunc($td1,$td2,isAsc)
// 前两个函数是td元素的jQuery对象，isAsc为true则为升序，否则为降序

代码如下：

function sortTable(selector, compFunc) {var mySelector = '.sortable';var myCompFunc = function($td1, $td2, isAsc) {var v1 = $.trim($td1.text()).replace(/,|\s+|%/g, '');var v2 = $.trim($td2.text()).replace(/,|\s+|%/g, '');var pattern = /^\d+(\.\d*)?$/;if (pattern.test(v1) && pattern.test(v2)) {v1 = parseFloat(v1);v2 = parseFloat(v2);}return isAsc ? v1 > v2 : v1 < v2;};var doSort = function($tbody, index, compFunc, isAsc){var $trList = $tbody.find("tr");var len = $trList.length;for(var i=0; i<len-1; i++) {for(var j=0; j<len-i-1; j++) {var $td1 = $trList.eq(j).find("td").eq(index);var $td2 = $trList.eq(j+1).find("td").eq(index);if (compFunc($td1, $td2, isAsc)) {var t = $trList.eq(j+1);$trList.eq(j).insertAfter(t);$trList = $tbody.find("tr");}}}}var init = function() {var $th = $("th" + selector);this.$table = $th.closest("table");var that = this;$th.click(function(){var index = $(this).index();var asc = $(this).attr('data-asc');isAsc = asc === undefined ? true : (asc > 0 ? true : false);doSort(that.$table.find("tbody"), index, compFunc, isAsc);$(this).attr('data-asc', 1 - (isAsc ? 1 : 0));});$th.css({'cursor': 'pointer'}).attr('title', '点击排序').append('&nbsp;<i class="fa fa-long-arrow-down" style="color:#2196F3" aria-hidden="true"></i><i class="fa fa-long-arrow-up" style="color:#2196F3" aria-hidden="true"></i>');};selector = selector || mySelector;compFunc = compFunc || myCompFunc;init();}

该函数适用于给传统页面的表格添加上排序功能，非常少的改动。
如果是基于Vue.js等数据驱动视图的框架做的页面，则实现表格排序很简单：
由于表格是以数组为数据源渲染出来的，只需对数组排好序，页面自动更新。

Javascript对HTML表格排序-很实用相关推荐

使用 JavaScript 进行HTML表格排序
当 HTML 表有很多数据时,使信息列可排序会很有用. 以下技术使用 JavaScript 通过单击列标题对表行进行排序. 这是一个所有列都可排序的示例表.第二次单击同一列标题文本会反转排序. Aut ...
HTML列表内容自动排序,JS实现HTML表格排序功能
本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: click me click me click me click me 15.43 700 ...
php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作
我们在上网中都能看到很多能够排序的,如大小.时间.价格等现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄 ...
计算机在表格底部插入一空行怎么弄,简单高效的Excel技巧，表格隔行插入空行，这两种方法很实用...
在对Excel表格进行操作的时候,我们有时候会碰到一个难题,那就是怎么在原表格中,隔行插入空行,以便于我们补充新增新的数据. 简单高效的Excel技巧,表格隔行插入空行,这两种方法很实用如上图所示, ...
网站开发中很实用的 HTML5 jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
jQuery html表格排序插件：tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
转一位计算机牛人的心得，谈计算机和数学，很实用~
转一位计算机牛人的心得,谈计算机和数学,很实用~ 发表日期:2009年10月26日出处:转自CSDNhttp://blog.csdn.net/fishwei2007/archive/2007/10/ ...

Javascript对HTML表格排序-很实用

Javascript对HTML表格排序-很实用

Javascript对HTML表格排序-很实用相关推荐

最新文章

热门文章