`

tablesorter.js,对要排序的数据进行筛选

 
阅读更多
最近的一个项目中需要用tablesorter.js在前台对IP地址进行排序,如下:
$(function(){
    $("#device").tablesorter({
  	     headers: {
  		       0: {sorter: "ipAddress"}
  	     }
    });
})

但是排序的结果始终不正确,跟踪了下代码后发现是由于<td>中的超链接符号<a>和<div>造成的,表格代码大致布局如下:
<td>
   <div>...</div>
   <div>
       <a href="#">IP地址</a>
   </div>
</td>

tablesorter是读取<td>中的HTML来进行排序的,所以此时就要对<td>中的内容进行筛选并得到需要排序的数据(IP地址),这里就要用到textExtraction方法了,代码如下:
$(function(){
    $("#device").tablesorter({
  	    headers: {
  		   0: {sorter: "ipAddress"}
  	    },
        textExtraction: function(node) {
            //此处进行筛选操作,考虑到兼容性,要对IE和FF分别筛选
            if(navigator.userAgent.indexOf("MSIE") > 0) {
                 //...
            } else {
                 //...
            }
        }
  });
})

更简单的方法就是在<td>中加入<input type="hidden" value="值"/>,再从该标签中获取要排序的值

node.childNodes[index].innerHTML
node.childNodes[index].childNodes[index].innerHTML
分享到:
评论

相关推荐

    jquery_tablesorter.js

    在 `jquery_tablesorter.js` 描述中提到的 "grid排序工具" 指的是该插件可以应用于类似网格布局的数据展示,帮助用户根据需要对表格中的行进行排序。"自己用了没问题,共享给大家" 表明这个文件经过了实际测试,是...

    jquery.tablesorter js排序 页面物理排序

    jQuery.tablesorter是一个非常流行的JavaScript库,用于对HTML表格进行排序。这个库使得用户可以通过点击表头轻松地对表格数据进行升序或降序排列,提供了丰富的自定义选项和功能扩展,大大增强了网页中表格的交互性...

    (完整实例)jquery实现表格内容静态排序,提高效率,jquery tablesorter.js

    在本文中,我们将深入探讨如何使用jQuery库,特别是jQuery TableSorter.js插件,来实现表格内容的静态排序,从而提升用户体验和数据管理效率。TableSorter.js是jQuery的一个强大扩展,它允许用户通过简单的点击表头...

    tablesorter.rar

    TableSorter是一个流行的数据排序和过滤插件,它允许用户轻松地对网页上的表格进行升序或降序排序,并支持自定义排序规则和实时查询功能。 **TableSorter 知识点详解** 1. **基本功能**: TableSorter 提供了对...

    jquery表格插件Tablesorter插件 表格内容筛选与分页筛选

    Tablesorter是一款轻量级的JavaScript库,它可以自动检测表格中的数据类型并进行相应的排序。用户只需在表格上简单地点击表头,即可对表格数据进行升序或降序排列。此外,Tablesorter还支持自定义排序函数,满足各种...

    tablesorter页面表格排序工具

    它允许添加额外的插件来增强功能,例如,分页插件可以实现表格的分页显示,过滤插件可以对表格数据进行筛选,而表头固定插件则能在滚动时保持表头可见,这些都极大地增强了tablesorter的实用性。 在实际使用中,...

    tablesorter-master表格排序.zip

    你可以设置默认的排序列和排序方式,还可以自定义排序规则,例如对日期、数字或自定义格式的数据进行排序。此外,插件支持多列排序,用户可以同时对多个列进行排序操作。 对于插件的扩展性,tablesorter-master表现...

    jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选

    它提供了一套完整的解决方案,用于对表格数据进行排序、筛选和分页,极大地提高了用户在处理大量表格数据时的效率和便捷性。 ### **一、基本功能** 1. **排序**:Tablesorter 允许用户通过点击表头来对表格中的...

    tablesorter插件

    - **初始化表格**:在JavaScript中,通过调用`$.tablesorter()`方法对表格进行初始化。可以设置各种配置项,如排序列、排序方式等。 - **添加事件监听器**:tablesorter提供了一系列的事件,如`sortStart`、`...

    表格分页显示--tablesorter

    它将表格数据抽象为内部结构,通过比较函数对数据进行排序,并更新DOM结构以反映新的排序状态。分页功能则是通过维护一个虚拟的表格视图,只显示当前页的数据,从而实现高效的滚动和切换。 ### 四、使用步骤 1. **...

    jQuery 插件 tablesorter 的使用

    jQuery 插件 tablesorter 是一个非常实用的工具,它为HTML表格提供了强大的排序功能,让用户可以方便地对表格数据进行升序或降序排列。这个插件在不改变原有表格结构的基础上,增强了表格的交互性和用户体验。接下来...

    实现table表格可按行拖拽,按列排序,并可以保存排序后的结果

    如果有,使用相应的数据调用`.tablesorter().trigger("sorton", [排序信息]);`来恢复之前的排序。 6. **监听排序事件**:可以使用`.bind('tablesorter.sortEnd', function() {...})`来监听排序结束的事件,当用户...

    扩展 jQuery TableSorter 插件 的搜索/过滤器插件

    TableSorter 是一个非常流行的 jQuery 插件,用于对 HTML 表格进行排序。而 `tablesorterFilter` 是一个增强版的插件,由 Christian Bach 原始的 TableSorter 插件基础上发展而来,它添加了搜索和过滤功能,使用户...

    jqueryTablesorter

    jQuery表格排序插件tableSorter是一款高效、灵活且易用的JavaScript库,它允许用户通过简单的鼠标点击来对HTML表格中的数据进行动态排序。tableSorter的核心功能是将普通的HTML表格转化为可交互的、支持多种排序方式...

    jQuery仿Excel样式的表格排序插件.zip

    插件会遍历表格中的所有行,对数据进行比较,并调整行的顺序,以达到排序效果。同时,为了保持视觉的一致性,插件还会为当前排序的列添加特殊的样式,以提示用户当前的排序状态。 二、使用步骤 1. 引入jQuery库:...

    jquery表格排序和筛选表

    在本主题“jQuery表格排序和筛选表”中,我们将深入探讨如何使用jQuery来实现动态表格的排序和筛选功能,这些功能在数据展示和用户交互中扮演着重要角色。 首先,让我们了解jQuery如何帮助我们操作HTML表格。HTML...

    jQuery html表格排序插件tablesorter使用方法详解

    jQuery表格排序插件tablesorter是一款强大的工具,它允许用户轻松地对HTML表格中的数据进行升序或降序排列。这个插件具有自动识别数据类型的功能,能够处理各种类型的表格数据,包括数字、日期和自定义内容。下面将...

    jquery-table-sorter:用于按每列对表格元素进行排序的小插件

    `jQuery Table Sorter`是一款基于JavaScript库jQuery的插件,它的主要功能是允许用户通过点击表格的表头来对表格数据进行升序或降序的排序。这个小插件的设计理念是轻量级、高效,并且高度可定制,因此它在网页开发...

    两个非常不错的 jquery表格排序效果

    Tablesorter是一个开源的jQuery插件,由Mottie维护,它允许用户通过点击表头轻松地对表格进行升序或降序排序。Tablesorter支持多种类型的排序,包括数字、日期和自定义排序,同时提供了许多可配置的选项和方法,如...

Global site tag (gtag.js) - Google Analytics