`

jQuery plugin之tablesorter实践

jQueryJavaScriptCSS 
阅读更多

目标简单又明了：使页面中 table 可排序化。

 

开始实践：

 

在<head>中加入：

 

<link type="text/css" rel="stylesheet" rel="stylesheet" href="/css/jquery/sortable.css" />
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
    var enable_table_sort = true;
    var highlightline = 'lightLine';
    if( enable_table_sort ){
        $("table[class*=tablesorter]").tablesorter({widgets:['zebra']}); // 斑马纹在这实现
        $("table[class*=tablesorter]")
            .filter('tbody').children().each(function(idx){
                $(this)
                    .mouseover(function(){$(this).addClass(highlightline)})
                    .mouseout(function(){$(this).removeClass(highlightline)});
            });
    }
});
//-->
</script>

 

如此这般可使页面中所有 class中含有tablesorter样式的table 实现表格排序、斑马纹（各行换色）和行高亮了。

 

真是方便啊！今后可以做成tag或放在vm中了。

 

附件中有 jQuery.tablesorter 插件的完整包，含有doc的，用的朋友来下吧。

分享到：
| 怎样打开端口
评论
发表评论

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

相关推荐

    jQuery表格排序插件tablesorter.zip

    Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。主要的特点包括：多列排序支持文本、URL地址、数值、IP...

    JQuery-tableDnD 拖拽的基本使用 Table Drag and Drop JQuery plugin

    在压缩包中的`Drag-Drop-Table-Plugin-with-jQuery-TableDnD`文件夹中，包含了完整的示例代码，包括HTML、CSS和JavaScript，供你参考和学习。 总之，jQuery TableDnD是一个强大且易于使用的插件，能帮助开发者轻松...

    JQuery 1.8.0 中文版

    7. **插件系统（Plugin System）**：jQuery社区开发了大量插件，扩展了jQuery的功能，例如，用于图片轮播的`jQuery.cycle`，用于表格排序的`jQuery.tablesorter`等。 在提供的`jQuery1.8.0_20120813.CHM`文件中，你...

    jquery 实现排序和分页

    对于分页功能，jQuery 有许多可用的插件，如 `jQuery Pagination Plugin`。这些插件提供了简单的 API 以创建和管理分页链接。 2. **使用步骤**： - 引入 jQuery 和分页插件的 CSS/JS 文件。 - 创建分页容器元素...

    JQuery1.3.chm

    6. **插件生态**: jQuery 1.3时期，其丰富的插件生态系统已经初具规模，例如用于表格排序的jQuery TableSorter，图片轮播插件jCarousel，以及表单验证的jQuery Validation Plugin等，这些插件极大地扩展了jQuery的...

    jQuery的插件列表(2010-1-25更新)

    7. **jQuery Flash Plugin**：允许在网页中方便地嵌入Flash内容，尽管现在Flash已经过时，但在那时是非常流行的。 8. **jQuery Media Plugin**：支持多种多媒体格式的播放器插件，使得音频和视频内容的集成变得简单...

    jquery-tablesort：用于可排序表的小巧而简单的jQuery插件

    一个用于排序表的小巧而简单的jQuery插件。 这是一个基本的。维护者通缉 我不再使用这个库了，也没有时间单独维护它。 如果您有兴趣帮助我维护此库，请告诉我！ 您的帮助将不胜感激！安装只需将jQuery和tablesort...

    JQuery 语法

    jQuery 社区提供了大量的插件，如用于图像轮播的`jquery.cycle2.js`，用于表格排序的`jquery.tablesorter.js`等。这些插件进一步扩展了jQuery的功能。 8. **版本和兼容性（Version and Compatibility）** jQuery ...

    再次分享18个非常棒的jQuery表格插件

    17. Expand table rows with jQuery – jExpand plugin：jExpand允许用户展开和折叠表格行，以显示更多详细信息，节省页面空间。 18. TableEditor：TableEditor是一个表格编辑插件，支持用户直接在表格中编辑数据，...

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