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 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
js 作用域和变量详解
Feb 16 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
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
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 学习之旅 (1)
2009/02/05 Javascript
JS获取父节点方法
2009/08/20 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python计算N天之后日期的方法
2015/03/31 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
《狼和小羊》教学反思
2014/04/20 职场文书
班级心理活动总结
2014/07/04 职场文书
最感人的道歉情书
2015/05/12 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2016公司新年问候语
2015/11/11 职场文书
社区宣传标语口号
2015/12/26 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电