jquery实现表格本地排序的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>jquery 表格排序</title>

    <style type="text/css">

        thead

        {

            background-color: Blue;

            color: White;

        }

        tr.odd

        {

            background-color: #ddd;

        }

        tr.even

        {

            background-color: #eee;

        }

        .clickable

        {

            text-decoration: underline;

        }

        .hover

        {

            background-color: #5dd354;

        }

        .sorted

        {

            background-color: #ded070;

        }

        .page-number

        {

            color: Black; 

            margin:2px 10px;

            padding:2px 5px;

        }

        .active

        {

            border:solid 1px red;

            background-color:#76a7d2;

            }

        .pager

        {

            margin-bottom:10px;

            margin-left:20px;

            }

    </style>

    <script type="text/javascript" language="javascript" src="js/jquery1.3.2.js"></script>

    <script type="text/javascript" language="javascript">

        $(function() {

            jQuery.fn.alternateRowColors = function() {                      //做成插件的形式

                $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行

                $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行

                return this;

            };

            $('table.myTable').each(function() {

                var $table = $(this);                       //将table存储为一个jquery对象

                $table.alternateRowColors($table);          //在排序时隔行变色

                $('th', $table).each(function(column) {

                    var findSortKey;

                    if ($(this).is('.sort-alpha')) {       //按字母排序

                        findSortKey = function($cell) {

                            return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();

                        };

                    } else if ($(this).is('.sort-numeric')) {       //按数字排序

                        findSortKey = function($cell) {

                            var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));

                            return isNaN(key) ? 0 : key;

                        };

                    } else if ($(this).is('.sort-date')) {          //按日期排序

                        findSortKey = function($cell) {

                            return Date.parse('1 ' + $cell.text());

                        };

                    }

                    if (findSortKey) {

                        $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {

                            //反向排序状态声明

                            var newDirection = 1;

                            if ($(this).is('.sorted-asc')) {

                                newDirection = -1;

                            }

                            var rows = $table.find('tbody>tr').get(); //将数据行转换为数组

                            $.each(rows, function(index, row) {

                                row.sortKey = findSortKey($(row).children('td').eq(column));

                            });

                            rows.sort(function(a, b) {

                                if (a.sortKey < b.sortKey) return -newDirection;

                                if (a.sortKey > b.sortKey) return newDirection;

                                return 0;

                            });

                            $.each(rows, function(index, row) {

                                $table.children('tbody').append(row);

                                row.sortKey = null;

                            });

                            $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');

                            var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');

                            //实现反向排序

                            if (newDirection == 1) {

                                $sortHead.addClass('sorted-asc');

                            } else {

                                $sortHead.addClass('sorted-desc');

                            }

                            //调用隔行变色的函数

                            $table.alternateRowColors($table);

                            //移除已排序的列的样式,添加样式到当前列

                            $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');

                            $table.trigger('repaginate');

                        });

                    }

                });

            });

        });

        //分页

        $(function() {

            $('table.paginated').each(function() {

                var currentPage = 0;

                var numPerPage = 10;

                var $table = $(this);

                $table.bind('repaginate', function() {

                    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();

                });

                var numRows = $table.find('tbody tr').length;

                var numPages = Math.ceil(numRows / numPerPage);

                var $pager = $('<div class="pager"></div>');

                for (var page = 0; page < numPages; page++) {

                    $('<span class="page-number"></span>').text(page + 1)

                     .bind('click', { newPage: page }, function(event) {

                         currentPage = event.data['newPage'];

                         $table.trigger('repaginate');

                         $(this).addClass('active').siblings().removeClass('active');

                     }).appendTo($pager).addClass('clickable');

                }

                $pager.insertBefore($table);

                $table.trigger('repaginate');

                $pager.find('span.page-number:first').addClass('active');

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table class="myTable paginated">

            <thead>

                <tr>

                    <th class="sort-alpha">

                        Last Name

                    </th>

                    <th class="sort-alpha">

                        First Name

                    </th>

                    <th>

                        Email

                    </th>

                    <th class="sort-numeric">

                        Due

                    </th>

                    <th class="sort-date">

                        Date

                    </th>

                    <th>

                        Web Site

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>

                        tmith

                    </td>

                    <td>

                        erthn

                    </td>

                    <td>

                        eth@gmail.com

                    </td>

                    <td>

                        $34.00

                    </td>

                    <td>

                       14 2009

                    </td>

                    <td>

                        ftp://www.baidu.com

                    </td>

                </tr>

                <tr>

                    <td>

                        TTmith

                    </td>

                    <td>

                        BJohn

                    </td>

                    <td>

                        jsmith@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        Mar 2009

                    </td>

                    <td>

                        ftp://www.baidu.com

                    </td>

                </tr>

                <tr>

                    <td>

                        CSmith

                    </td>

                    <td>

                        John

                    </td>

                    <td>

                        DDDD@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        Mar 2009

                    </td>

                    <td>

                        https://3water.com

                    </td>

                </tr>

                <tr>

                    <td>

                        Smith

                    </td>

                    <td>

                        John

                    </td>

                    <td>

                        sdsf@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        f32 2009

                    </td>

                    <td>

                        ffttp://3water.com

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    </form>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 #Javascript
JavaScript前补零操作实例
Mar 11 #Javascript
JavaScript限定图片显示大小的方法
Mar 11 #Javascript
iScroll中事件点击触发两次解决方案
Mar 11 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP安全配置
2006/12/06 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python实现的购物车功能示例
2018/02/11 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
个人剖析材料及整改措施
2014/10/07 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Go语言编译原理之源码调试
2022/08/05 Golang